Question

我有两种形式。我想用1个按钮提交两个表格。有没有什么方法可以帮助我做到这一点？

示例：

<form method="post" action="">
<input type="text" name="something">
</form>

<form method="post" action="">
<input type="text" name="something">
<input type="submit" value="submit" name="submit">
</form>

我希望通过1个提交按钮提交两个表单。任何帮助将不胜感激。

Answer 1

这里的问题是，当您提交表单时，当前页面将停止。页面上的任何活动都将停止。因此，只要您单击表单的“提交”或使用JavaScript提交表单，该页面就是历史记录。您无法继续提交其他页面。

一个简单的解决方案是通过在新窗口或选项卡中加载表单的提交来保持当前页面处于活动状态。发生这种情况时，当前页面保持活动状态。因此，您可以轻松地拥有两个表单，每个表单都在一个窗口中打开。这是通过target属性完成的。为每一个使用独特的东西：

<form action='' method='post' target='_blank1'>

目标是要使用的窗口或标签。不应该有一个名为“_blank1”，因此它将在新窗口中打开。现在，您可以使用JavaScript提交两个表单。为此，您需要为每个ID提供唯一ID：

<form id='myform1' action='' method='post' target='_blank1'>

这是一种形式。另一个需要另一个ID。您可以创建一个按钮类型的提交按钮（不提交），点击时触发JavaScript：

<submit type='button' onclick="document.getElementById('myform1').submit();document.getElementById('myform2').submit();" value='Click to Submit Both Forms'>

当您单击按钮时，JavaScript会提交两个表单。结果在新窗口中打开。有点烦人，但它做了你特别要求的。我根本不会这样做。有两个更好的解决方案。

最简单的方法是制作一个表格，而不是两个：

<form action='' method='post'>
    <input type='text' name='text1'>
    <input type='text' name='text2'>
    <input type='submit' value='Submit'>
</form>

您可以在表单标记之间放置大量HTML，因此输入框不需要在页面上靠近。

第二个更难的解决方案是使用Ajax。这个例子肯定比你准备处理的更复杂。所以，我建议只使用一种形式而不是两种形式。

注意：在我提交之后，Nicholas D提交了一个Ajax解决方案。如果您根本无法使用一个表单，请使用他的Ajax解决方案。

Answer 2

你必须做那样的事情：

按钮：

<div id="button1">
    <button>My click text</button>
</div>

JS

<script>
   $('#button1').click(function(){
       form1 = $('#idIFirstForm');
       form2 = $('#idISecondForm');
       $.ajax({
        type: "POST",
        url: form1.attr('action'),
        data: form1.serialize(),
        success: function( response ) {
          console.log( response );
        }
      });
      $.ajax({
          type: "POST",
          url: form2.attr('action'),
          data: form2.serialize(),
          success: function( response2 ) {
            console.log( response2 );
          }
      });
   });
</script>

Answer 3

您可以在后台创建伪表单。没有时间编写代码，请理论。单击提交后，只需停止传播所有其他事件，并将所需的所有信息收集到您附加到文档的另一个表单（通过jquery新创建），然后您可以提交所有必要信息所在的第三个表单。

Answer 4

如果您不想同时使用1个按钮同时提交2个表单，这些工具可以将输入数据提供给其他地方使用：

选项1 ...... 而不是使用<form> - 使用通常的输入语法收集数据例如：<input type="text" name="dcity" placeholder="City" />
而不是使用此示例中的表单：

<form class="contact" method="post" action="cheque.php" name="pp" id="pp">
  <label for="invoice">Your Name</label>
   <input type="text" id="invoice" name="invoice" />
  <button class="button" type="submit" id="submit">Do It Now</button>
 </form>

使用：

<label for="invoice">Your Name</label>
<input type="text" id="invoice" name="invoice" />
<button type="button" onclick="CmpProc();" style="border:none;"><img src="yourimage.png"/>&nbsp;&nbsp;&nbsp;Do&nbsp;It&nbsp;Now</button>

然后编写函数CmpProc()来处理处理/提交。在该函数内部使用带有submit()方法的Javascript表单对象，如...

<script type="text/javascript">
   function submitform() {
    document.xxxyourformname.submit();
   }
 </script>

不知怎的，我怀疑将两个表单合二为POST / GET值得重新考虑。

选项2 ...... 而不是使用POST将数据用于下一页，而是考虑使用PHP $_SESSION来存储您的每个条目，以便在多个页面中使用。（请记住在您存储的每个页面的开头使用session_start();或从中检索变量，以便页面上可以使用全局方面。此外，还可以减少工作量。

Answer 5

看男人。仅使用HTML无法做到这一点。你可以在一个表单中输入输入，或者使用jquery为你处理这个。

多个表单提交一个提交按钮

5 个答案: