在另一个表单中提交表单答案

【问题标题】：submit a form inside another form在另一个表单中提交表单
【发布时间】：2013-10-09 16:12:47
【问题描述】：

我有一个带有 POST 方法的表单和另一个页面的操作。

在表单中，我需要使用不同的操作提交另一个表单，但它使用主表单操作提交。

这是我的第二种形式：

<script>
    function formSubmit()
    {
        document.getElementById("invoices_form").submit();
    }
</script>

<form action="resend_multiple_invoices.php" name="invoices_form" method="post">
    <input type="button" onclick="formSubmit()" value="Send Invoices" />
</form>

我怎样才能让它提交第二个表单而不是主表单？

【问题讨论】：

"在表格中我有另一个表格" 请不要这样做。 HTML 中的嵌套表单不起作用。我高度建议不要将<form> 放在另一个<form> 中。
是的，在表单中包含表单是无效的，事实上如果我的糟糕经历正确地为我服务，Chrome 会完全拒绝它！因为您使用的是 Javascript，所以您不需要“表单中的表单”:)
为什么不使用两个单独的表格？
为什么不使用相同的表单但使用不同的触发器，这样您就可以在服务器端检查哪个提交表单？？
或者您可以将表单嵌套在另一个表单中的表单中！诶？嗯？

标签： javascript php forms

【解决方案1】：

您不能（普遍地）将嵌套表单与其父表单分开提交。嵌套表单是无效的 HTML，如 W3C prohibitions 中所述。

为了解决你的问题，我建议你使用如下两种不同的形式：

<script>
    function invoicesFormSubmit()
    {
       document.getElementById("invoices_form").submit();
    }

    function otherFormSubmit()
    {
       document.getElementById("other_form").submit();
    }
</script>

<form action="resend_multiple_invoices.php" name="invoices_form" method="post">

    //
    // Input fields go here
    //

    <input type="button" onclick="invoicesFormSubmit()" value="Send Invoices" />
</form>

<form action="other_method.php" name="other_form" method="post">

    //
    // Input fields go here
    //

    <input type="button" onclick="otherFormSubmit()" value="Other Method" />
</form>

【讨论】：

【解决方案2】：

您可以在输入字段中使用“表单”属性，然后混合所有输入。通过提交，他们指的是正确的表格。

<form action="" method="post" id="form1"></form>
<form action="" method="post" id="form2"></form>

<input name="firstname" form="form1">
<input name="firstname" form="form2">

<button type="submit" name="submit" form="form1">Save form 1</button>
<button type="submit" name="submit" form="form2">Save form 2</button>

另见https://www.w3schools.com/tags/att_input_form.asp

【讨论】：

太棒了！为什么我必须运行超过 20 个问题和答案才能看到解决方案！

【解决方案3】：

JQuery.ajax 和 html 用于通过 ajax 验证“内部表单”，然后提交整个表单。在这两种情况下，我都使用 ajax 来显示 controller.php 文件和提交 ID 的用途。您还可以通过使用类而不是 id 作为 Jquery 选择器来拥有由几个隔离部分组成的内部表单。

<form>
    <input />
    <textarea />
    <select /> <!-- etc. -->
    <section id="verify">
        <input />
        <textarea />
        <select /> <!-- etc -->
        <button type="button">submit</button>
        <!-- eg. sub-submission verifies data in section -->
    </section>
    <select />
    <input />
    <input type="submit" value="submit" />
</form>
<script>
$(document).ready(function() {

   $("#verify button").on ('click', verify);
   $('form').submit (formSend);

   function verify (){
       // get input data within section only (ie. within inner form)
       var postData = $('#verify').filter(':input' ).serializeArray();
       postData.push ({name:"submitId", value:'verify'});
       var request = $.ajax ({
          type: "POST",
          url: "controller.php",
          data: postData,
          error: function (xhr, status, message){
             alert (status);
          }
       });
   }
   function formSend (){
       // get input data within entire form
       var postData = $(this).serializeArray();
       postData.push ({name:"submitId", value:'send'});
       var request = $.ajax ({
          type: "POST",
          url: "controller.php",
          data: postData,
          error: function (xhr, status, message){
             alert (status);
          }
       });
   }
});
</script>

【讨论】：