Question

我会在表单中包含多个表单。

  <form id="masterform" method="POST" action="">

      <form id="form1" method="POST" action="">
            <input type="text" name="dataForm1">
            <input type="submit" id="form1Sub"/>
      </form>

      <form id="form2" method="POST" action="">
            <input type="text" name="dataForm2">
            <input type="submit" id="form2Sub"/>
      </form>

      <form id="form3" method="POST" action="">
            <input type="text" name="dataForm3">
            <input type="submit" id="form3Sub"/>
      </form>

            <input type="submit" id="formMasterSub"/>
  </form>

表格的结构必须是这样的。

当我点击form1sub的提交按钮时，它只会在表单form1中发布数据，因此当我点击提交form2sub时，它只会发布form2的数据{1}}，等等。

现在最重要的是：

当我点击formMasterSub的提交按钮时，它会提交整个表单中的所有数据，例如dataForm1，dataForm2和dataForm3。

有可能这样做吗？如果有可能，如何正确地做到这一点？

非常感谢提前。

Answer 1

您无法使用嵌套表单。将提交按钮替换为简单按钮。并且可以使用如下的jquery来完成个人和整个表单提交：

<强> HTML ：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  <form id="form1" method="POST" action="">
        <input type="text" name="dataForm1">
        <input type="button" id="form1Sub"/>
  </form>
  <form id="form2" method="POST" action="">
        <input type="text" name="dataForm2">
        <input type="button" id="form2Sub"/>
  </form>
  <form id="form3" method="POST" action="">
        <input type="text" name="dataForm3">
        <input type="button" id="form3Sub"/>
  </form>
  <input type="button" id="formMasterSub"/>

<强> JQuery的：

<script>
$(document).ready(function(){
    $('#form1Sub').click(function(){
        $('#form1').submit();
    });
    $('#form2Sub').click(function(){
        $('#form2').submit();
    });
    $('#form3Sub').click(function(){
        $('#form3').submit();
    });
    $('#formMasterSub').click(function(){
    var form1Data = $('#form1Sub').serialize();
    var form2Data = $('#form2Sub').serialize();
    var form3Data = $('#form3Sub').serialize();
       $.ajax({
            url: 'your url',
            data: {form1: form1Data, form2: form2Data, form3: form3Data}
       });
    });
});
</script>

Answer 2

为每个嵌套表单添加name属性（分别为其id，例如<form id="form1" name="form1" method="POST" action=""> ...等等）

<input type="submit" id="formMasterSub" onclick="submitAllForms()" />

js part：

function submitAllForms(){
    document.forms['form1'].submit();
    document.forms['form2'].submit();
    document.forms['form3'].submit();
}

P.S。其他的是正确的 - 你的标记最初是错误的

提交主表单

2 个答案: