Submitting a form in an iframe with JavaScript

Asked 6/11, 2012 at 21:37 Answered 18/2, 2020 at 5:6

The iframe is on the same domain, I tried the following code, but none of it worked:

 myframe.document.getElementById("myform").submit();
 parent.top.frames[0].document.forms[0].submit(); 
 myframe.document.getElementById("myform").submit();

 MyIFrame = document.getElementById("myframe");
 myIFrame.getElementById("myform").submit();

Update:

This is the HTML:

<html>
<body>
<iframe frameborder="0" scrolling="no" width="530" height="298"
  src="/iframe.php" name="myframe" id="myframe">
  <p>iframes are not supported by your browser.</p>
</iframe><br />

<form action="/styles.css" method="post" id="form1">
<input type="text" name="input1" value=""/>
<input type="text" name="input2" value=""/>
<input type="button" value="test" onclick="submitFrame()">
<input type="submit" value="submit">
</form>

<script>

function submitFrame(){

var MyIFrame = document.getElementById("myframe");
var MyIFrameDoc = (MyIFrame.contentWindow || MyIFrame.contentDocument);
if (MyIFrameDoc.document) MyIFrameDoc = MyIFrameDoc.document;
MyIFrameDoc.getElementById("myform").submit(); // ## error 

}


</script>   
</body>
</html>

iframe.php:

<form method="post" class="af-form-wrapper" id="myform" name="myform" action="/"  >

<input type="text" name="input1" value="2073809442" />
<input type="text" name="input2" value="1" />
<input type="submit" name="submit" value="submit" />
    </form>

Firebug says:

 MyIFrameDoc.getElementById("myform").submit is not a function

Bandaranaike answered 6/11, 2012 at 21:37 Comment(0)

Try this:

var MyIFrame = document.getElementById("myframe");
var MyIFrameDoc = (MyIFrame.contentWindow || MyIFrame.contentDocument);
if (MyIFrameDoc.document) MyIFrameDoc = MyIFrameDoc.document;
MyIFrameDoc.getElementById("myform").submit();

UPDATE

~~I can't figure out why this doesn't work, but here is something that does:~~

MyIFrameDoc.getElementById("mybutton").click();

iframe.php:

<input type="submit" name="submit" value="submit" id="mybutton" />

UPDATE 2

The reason you're getting the submit is not a function error is because you've named your submit button submit, so MyIFrameDoc.getElementById("myform").submit actually references an HTMLInputElement, not the HTMLFormElement.submit() method.

All you need to do is rename your submit button, e.g.:

<input type="submit" name="submit2" value="submit" />

Vladimar answered 6/11, 2012 at 21:45 Comment(4)

Thanks! I'm getting an error on submit(); I updated my post with code :) – Bandaranaike 6/11, 2012 at 22:6

Thanks man, I added id and name to the button, but I get MyIFrameDoc.getElementById("mybutton") is null – Bandaranaike 7/11, 2012 at 8:7

@Bandaranaike Did you add an id to the button on the parent page or the iframe, cause you're supposed to add it to the button on the iframe page. Also, make sure you've changed the submit event to click event. – Vladimar 7/11, 2012 at 9:25

I'm a dumbass :p I added it on the page instead of the iframe, now it works perfectly, thanks a lot! – Bandaranaike 7/11, 2012 at 10:17

Submit the Iframe's URL from javascript

   if (window.parent.$("#IframeId").length > 0) {
        window.parent.$("#IframeId")[0].contentDocument.forms[0].submit();
    }

Microtome answered 12/6, 2017 at 8:35 Comment(0)

You do not need to post into iframe. You can use normal blank "visible" window. Define your form like this:

var request = document.createElement("FORM")
request.id = "request"
request.name = "request"
request.action = "callYour.php"
request.method = "POST"
request.target = "_blank"

and in your php, when you are done just close the window by:

window.close();

within the HTML part, or within embedded script tags. The new window temporarily opens up but closeses itself when it is completed.

Friesland answered 18/2, 2020 at 5:6 Comment(0)

Recommended topics

Hot tags