Submit iframe form outside iframe using button
P粉316110779
2023-09-04 10:44:17
<p>I have a contact.html file that contains an iframe: <code><iframe name="myframe" id="frame1" src="contact_inputs.php"></iframe> ;</code>, which only contains the three input boxes in contact_inputs.php. </p>
<p>I want to submit a form in an iframe file to php_form.php via a button outside the iframe. </p>
<blockquote>
<p>Contact.html</p>
</blockquote>
<pre class="brush:php;toolbar:false;"><iframe name="myframe" id="frame1" src="contact_inputs.php"></iframe>
<form action="php_form.php" method="post">
<input type="submit" name="DoIt" value="submit">
</form></pre>
<blockquote>
<p>contact_inputs.php</p>
</blockquote>
<pre class="brush:php;toolbar:false;"><form>
<input type="" name="cn">
<input type="" name="ex">
<input type="" name="cr">
</form></pre>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Here you can try this logic:
function sub(ev) { ev.preventDefault(); let frame1 = document.getElementById("frame1"); let parser = new DOMParser(); let doc = parser.parseFromString(frame1.innerHTML, "text/html"); let iframeForm = doc.body.querySelector("form"); console.log(iframeForm); //通过name属性访问表单输入字段的值 console.log(iframeForm.cn.value); }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <iframe name="myframe" id="frame1" src="contact_inputs.php"> <form id="iframe1Form"> <input type="" name="cn" value ="HELLO"/> <input type="" name="ex" /> <input type="" name="cr" /> </form> </iframe> <form onsubmit="sub(event)"> <input type="submit" name="DoIt" value="submit" /> </form> </body> </html>