1

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:

JavaScript post request like a form submit

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.

Community
  • 1
  • 1
Stavros Korokithakis
  • 4,080
  • 10
  • 32
  • 40

3 Answers3

8

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.

Dan Heberden
  • 10,376
  • 2
  • 31
  • 29
  • I have gotten the iframe's document as you specified, and I have changed the code to create the form correctly, but the form still reloads the whole page... I also create the controls inside the iframe, what else could I be doing wrong? – Stavros Korokithakis Jun 08 '10 at 21:12
  • when you create the form, you can see it in the iframe (using firebug or equivalent)? you could add .target = '_self' - but that's the default behavior so shouldn't matter. – Dan Heberden Jun 08 '10 at 21:25
  • You know, I don't! With firebug I only see the tags in the iframe, but if I do innerHTML on the iframe I do see it... It's odd... – Stavros Korokithakis Jun 08 '10 at 23:32
  • After some more experimentation, the form appears to be a child of the iframe, but not actually *inside* the iframe. That is, I can see it by manipulating the DOM with javascript, but not in the iframe itself... – Stavros Korokithakis Jun 08 '10 at 23:37
  • so try adding it to the frame's body? `document.getElementById('my_iframe_id').contentWindow.document.body.appendChild(form);` – Dan Heberden Jun 08 '10 at 23:41
1

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.

meager
  • 209,754
  • 38
  • 307
  • 315
Stavros Korokithakis
  • 4,080
  • 10
  • 32
  • 40
0

Not sure how much this will help, but the answer you point at does not give the form a name/id. 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/id.

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.

Jeremy Goodell
  • 16,559
  • 4
  • 33
  • 51