Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Submitting a form in an iframe with JavaScript

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
like image 685
Kristian Avatar asked Nov 06 '12 21:11

Kristian


People also ask

Can you put a form in an iframe?

To embed your form using an iFrame, copy and paste the iFrame code directly into the HTML of your web page.

Can you submit forms using JavaScript?

submit() is used for dynamic creation and sending the details to the server. The JavaScript form submission can be used for object creation and various attributes can also be used. The attributes can be class, id, tag, etc.

Can you use JavaScript in an iframe?

It is called an inline frame because to the user it is all one web page. The child iframe is a complete browsing environment within the parent frame. It can load its own JavaScript and CSS separate from the parent.

What is correct way to submit a form using JavaScript?

When we click on the link, the function submitForm() will get executed. This function will get the element object using DOM getElementById() method by passing the form id to this method, then the form will be submitted by using submit() method. Example: Create a form and submit it using the above approach.


1 Answers

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" />
like image 174
Korikulum Avatar answered Oct 10 '22 02:10

Korikulum