javascript - 如何使用一个提交按钮在一个页面中提交 2 个表单

Question

我创建了一个包含两个表单的 php 页面，但我希望两个表单都只有一个提交按钮。表单具有 ids firstform 和 secondform。我已经尝试过其他脚本，但它们并没有真正起作用。

下面是我的代码:

<script language="javascript">
submitForms = function(){
    document.getElementById("firstform").submit();
    document.getElementById("secondform").submit();
}

</script>

<input type="image" src="images/order-button.png" name="button" value="Submit" onclick="submitForms()"/>

Answer 1

你有几个问题

1. input type=image 是一个提交按钮，因此您尝试从一个不存在的表单提交内容，很可能与您所在的页面相同

2. 当你提交form1时，它会替换当前页面，如果你同时提交form2，很可能会干扰form1的提交

这是您可以尝试的(纯 javascript):

<script language="javascript">
function submitForms() {
  document.getElementById("firstform").submit();
  document.getElementById("secondform").submit();
 }
</script>

<form id="firstform" target="iframe1">
</form><iframe name="iframe1" style="display:none"></iframe>
<form id="secondform" target="iframe2">
</form><iframe name="iframe1" style="display:none"></iframe>
<button typ"button" onclick="submitForms()"><img src="images/order-button.png" "/></button>

或者一次对一个表单进行 AJAX(假设已加载 jQuery)

DEMO HERE

$(document).ready(function() {
  $("#subbut").click(function(e) {
    e.preventDefault(); // or make the button type=button
    $.post($("#firstform").attr("action"), $("#firstform").serialize(), function() {
      $.post($("#secondform").attr("action"), $("#secondform").serialize(),
        function() {
          alert('Both forms submitted');
        });
    });
  });
});

---

更新:如果您希望将两个表单的内容提交给一个操作，只需添加序列号:

$(document).ready(function() {
  $("#subbut").click(function(e) {
    e.preventDefault(); // or make the button type=button
    $.post($("#firstform").attr("action"), $("#firstform").serialize() + $("#secondform").serialize(), function() {
      alert('Both forms submitted');
    });
  });
});

PS:演示中的 PHP 只是回显您发布的内容。服务器上不需要特殊操作。