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
To embed your form using an iFrame, copy and paste the iFrame code directly into the HTML of your web page.
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.
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.
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.
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With