Target an iframe with a HTML Post with jQuery

Question

If I\'m using jQuery or JavaScript to do a post, how can I make it target an iframe rather than the current page?

jQuery.post( 
    url, 
    [data], 
    [c         


        

Answer 1

You can solve the no-form-allowed-within-a-form problem by dynamically creating the form and appending it to the body. So you'd do something like this:

$().ready(function() {
    $('body').append('<form 
       action="url" 
       method="post" 
       target="iframename" 
       id="myspecialform">
         <input type="hidden" name="parameter" value="value" />
       </form>');
});

That creates your iframe-updating form outside of the main form that encompasses everything else on the page. Then just call it as Josh recommended: $('#myspecialform').submit();.

Answer 2

Here's what I did to get around the issue of having a form within a form on a asp.net page when I needed to submit data to a remote page via a form ideally using AJAX / jQuery.

1. I created variables to capture the asp.net form name, target, action, method, etc.

2. I held that information from the form in those variables and then changed the form itself using jQuery to do what I needed it to do.

3. Then I posted the form via AJAX (because I needed a form to post to a seperate page dynamically so the other page could GET the info).

4. Finally, I changed the asp.net form back to the way it was so the rest of the page could work correctly.

This seems to have resolved my need for a similar solution.

Answer 3

You're missing the point of AJAX. If you want to post something to an iframe, you could do this by a simple form, posted by JavaScript or by the usual way: a submit button.

Answer 4

Maybe you are missing the point of an AJAX request - why are you trying to specify the "target" of an asynchronous request? This makes no sense as the whole point of AJAX is that the request from the server gets sent back to the Javascript, free of page reloads or HTML destinations.

If you wanted to load the result of the request onto an iframe, you might do:

$.post('myurl', function(data) {
    $('#myframe').html(data);
}, 'html');

Answer 5

here is how I did it in javascript with plain html:

var form=$("<form/>").attr({
    method: "post",
    action: "iframe.php",
    target: "list_frame"
});
form.append($("<input/>").attr({name:"field1",value:0}));
form.append($("<input/>").attr({name:"field2",value:1}));
form.append($("<input/>").attr({name:"field3",value:2}));
form.append($("<input/>").attr({name:"field4",value:3}));
form.append($("<input/>").attr({name:"field5",value:4}));
$("body").append(form);
form.submit();

Answer 6

You can do this via a regular form:

<form action="targetpage.php" method="post" target="iframename" id="formid">
   <input type="hidden" name="foo" value="bar" />
</form>

You can then use jQuery to submit the form:

$("#formid").submit();