如何使用单个提交按钮在一个页面中提交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. 输入类型=图像是一个提交按钮,因此您尝试从不存在的表单提交内容,可能与您所在的页面相同

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 onclick="submitForms()"><img src="images/order-button.png" "/></button>

或者AJAX一次一个表单(假设加载了jQuery)

在这里演示

$(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只是回显你发布的内容.服务器上不需要特殊操作.