POST a form in an iframe.

Question

I would like to POST a form in an iframe, generated like so:

My JS loads an iframe inside the page, adds a form to the iframe and submits the form. What I would like to happen is the iframe to load the result of that request. So, I would effectively like to post a form and render the result inside the iframe, without touching the parent (apart from putting the iframe up for display in the first place).

I am using the code from this answer:

http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit/134003#134003

but I can't get it to not reload the parent. I post the form, and instead of the iframe refreshing, the entire parent refreshes. I don't know why that is, since the url it's posting to is different and would at least redirect there.

Can anyone help me with this problem? I just want a post inside an iframe and only within the iframe, basically.

EDIT: After some more research, apparently the form is not being created properly. I'm using document.createElement("form") and then document.getElementById("my_iframe_id").appendChild(form) to append it, but it does not seem to be working correctly.

Answer 1

Correct, because you are creating the form node in the current document.

document.getElementById("my_iframe_id").contentWindow.document.createElement('form'); 

to create it inside the iframe.

Answer 2

Not sure how much this will help, but the answer you point at does not give the form a name. If you are trying to post the form with something like "document.getElementById('myForm').submit()", you might have a problem because your form doesn't have a name.

In the past, I've had trouble with form submission apparently submitting the wrong form when there are multiple forms on a page. In every case, giving the form a name/id and then getting the form by id and calling submit() seemed to solve the problem.

Answer 3

It works now, part of it was that "document" was wrong, as Dan said, and the other part was that, when inserting into the iframe, one needs to use "document.getElementById(div).contentWindow.document.childNodes[0].appendChild(form)" rather than just "document.getElementById(div).innerHTML".