如何通过iframe外部按钮提交iframe内表单至指定PHP文件

步骤1：修改iframe内的表单（contact_inputs.php） #

先给iframe里的表单指定提交目标、请求方法，同时添加ID方便后续JS获取：

<form id="iframeForm" action="php_form.php" method="post">
  <input type="text" name="cn">
  <input type="text" name="ex">
  <input type="text" name="cr">
</form>

注：给输入框加上type="text"是规范写法，避免浏览器默认行为异常。

步骤2：修改父页面提交按钮的逻辑（contactus.html） #

移除父页面里的独立表单，换成普通按钮并绑定点击事件，通过JS获取iframe内的表单并触发提交：

<iframe name="myframe" id="frame1" src="contact_inputs.php"></iframe>
<button id="submitBtn">submit</button>

<script>
document.getElementById('submitBtn').addEventListener('click', function() {
  const iframe = document.getElementById('frame1');
  const iframeForm = iframe.contentDocument.getElementById('iframeForm');
  iframeForm.submit();
});
</script>

补充说明 #

• 确保两个页面在同一域名下，否则浏览器同源策略会阻止JS访问iframe内的DOM元素。
• 若需在提交后处理结果，可监听iframe的load事件，或让php_form.php返回对应提示信息。

内容的提问来源于stack exchange，提问作者apex anchor