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

【问题标题】：How to submit 2 forms in one page with a single submit button如何使用单个提交按钮在一个页面中提交 2 个表单
【发布时间】：2012-02-01 13:23:10
【问题描述】：

我创建了一个包含两个表单的 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()"/>

【问题讨论】：

你试过从submitFormsreturn false吗？
@DanielA.White 不，我没试过，但是在哪里放返回 false
唔唔唔。提交会将您转发到操作 URL，除非它发回不打算由浏览器显示的内容（您可以下载的文件）。您可以使用 javascript 发送一个 ajax 发布消息，其中包含每个表单中的数据。

标签： javascript html

【解决方案1】：

你有几个问题

input type=image 是一个提交按钮，因此您尝试从不存在的表单提交内容，可能与您所在的页面相同
当你提交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 只是回显您发布的内容。服务器上不需要特殊操作。

【讨论】：

mplungjan 我尝试了两种方式，当我将提交按钮放在第一个表单中时，它只工作，当我将提交按钮放在第二个表单中时，只有第二个表单工作，但是当我放置提交时两个表单的按钮都没有工作

【解决方案2】：

将第一个表单上的“target”属性设置为“_blank”
将第一个表单上的“action”属性设置为“#close”（将“close”替换为您想要的任何内容。
如果 document.location.hash 是 window.close()，则在页面上有一个脚本检查 document.location.hash 是否“关闭”

这是要演示的 jsfiddle。

http://jsfiddle.net/TqhPr/18/

HTML

<form id="f1" name="f1" target="_blank" method="POST" action="#close">
    <input type="hidden" value="1" />
    <input type="submit" id="s1" value="11" />
</form>
<hr/>
<form id="f2" name="f2" method="POST" action="#second_form">
    <input type="hidden" value="2" />
    <input type="submit" id="s2" value="22" />
</form>
<hr/>
<input type="button" id="both" value="Submit Both Forms" />

JavaScript

$(document).ready(function() {
    $("#both").click(function() {
        document.getElementById("f1").submit();
        document.getElementById("f2").submit();
    });
    if(document.location.hash == "#close") {
        alert("closing the window caused by posting the first form");
        window.close();
    }
    if(document.location.hash) {
        alert(document.location.hash);
    }
});

【讨论】：

“单独提交”是什么意思，请在您的cmets中详细说明
mplungjan 当我点击 11 按钮时，它给我的值 1 和按钮 22 相同，但是当我点击“提交两种表格”时它不起作用

【解决方案3】：

我用它来解决类似的问题。我想创建一个页面来查询多个站点并并排查看它们的结果：

WordLookup.html（main/home/frame 入口点）：

<html>
  <head>
    <title>Word Lookup</title>
  </head>
  <frameset cols="33%,34%,33%">
    <frame src="" name="DIC">
    <frameset rows="21,*">
      <frame src="frame.html" name="PRF">
      <frame src="" name="MW">
    </frameset>
    <frame src="" name="TFD">
  </frameset>
</html>

然后是 frame.html（javascript 方法）：

<html>
<head>
<style>
  body { margin: 0; background-color: #AAAAAA; }
  table, td { padding: 0; border-collapse: collapse; margin-left: auto; margin-right: auto; }
  form { padding: 0; margin: 0; }
</style>
<script>
  function submitForms(){
    var x = document.getElementById("search3").value;
    document.getElementById("fr1").setAttribute("value", x);
    document.getElementById("DIC").submit();
    document.getElementById("fr2").setAttribute("value", x);
    document.getElementById("MW").submit();
    document.getElementById("fr3").setAttribute("value", x);
    document.getElementById("TFD").submit();
    document.getElementById("search3").value = "";
  }
</script>
</head>

<body>

  <table>
    <tr>
      <td>
        <input id="search3" type="text" placeholder="3x Search" onclick="value=''" onkeydown="if (event.keyCode == 13)
{submitForms()}" autofocus="1">
      </td>
      <td>
        <form action="http://www.dictionary.com/dic" target="DIC" id="DIC">
          <input id="fr1" name="q" type="hidden" placeholder="Dictionary" onclick="value=''">
        </form>
      </td>
      <td>
        <form action="https://www.merriam-webster.com/dictionary" target="MW" id="MW">
          <input id="fr2" name="s" type="hidden" placeholder="Merriam-Webster" onclick="value=''">
        </form>
      </td>
      <td>
        <form action="//www.thefreedictionary.com/_/search.aspx" target="TFD" id="TFD">
          <input id="fr3" name="word" type="hidden" placeholder="TheFreeDictionary" onclick="value=''">
        </form>
      </td>
    </tr>
  </table>
</body>
</html>

抱歉，如果这有点罗嗦，但这是一个工作示例（在 chrome 56ish 中）。

【讨论】：

【解决方案4】：

此代码使用单个提交按钮成功发布了 2 个表单数据。

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
/* Collect all forms in document to one and post it */
function submitAllDocumentForms() {
    var arrDocForms = document.getElementsByTagName('form');
    var formCollector = document.createElement("form");
    with(formCollector)
    {
        method = "post";
        action = "test.php";
        name = "formCollector";
        id = "formCollector";
    }
    for(var ix = 0 ; ix < arrDocForms.length ; ix++) {
        appendFormVals2Form(arrDocForms[ix], formCollector);
    }
    document.body.appendChild(formCollector);
    formCollector.submit();
}

/* Function: add all elements from frmCollectFrom and append them to 
             frmCollector before returning frmCollector*/
function appendFormVals2Form(frmCollectFrom, frmCollector) {
    var frm = frmCollectFrom.elements;
    for(var ix = 0 ; ix < frm.length ; ix++)
        frmCollector.appendChild(frm[ix]);
    return frmCollector;
}
</SCRIPT>

<FORM METHOD=POST ACTION="test.php" NAME="form1" id="form1">
    <INPUT TYPE="text" NAME="box1" size="20" >
</FORM>
FORM2:
<FORM METHOD=POST ACTION="test.php" NAME="form2" id="form2">
    <INPUT TYPE="text" NAME="box2" size="20" >
</FORM>

<INPUT TYPE="button" value="Submit Form 1 & 2" onClick="submitAllDocumentForms()">

【讨论】：

太棒了——这不是你问的。您要求提交两个表单，而不是如何将两个表单连接到一个提交中。查看我的更新
mplungjan 是的，你的演示也很完美，非常感谢:)