在 1 个按钮中提交两个表单答案

【问题标题】：submit two forms in 1 button在 1 个按钮中提交两个表单
【发布时间】：2012-02-22 21:16:37
【问题描述】：

我正在尝试同时提交 2 个表单我正在尝试将 1 个表单发送到我的数据库，将另一个表单发送到另一个站点

我的代码是这样的：

function submitform(){
    document.forms["form2"].submit();
    document.forms["form1"].submit();

}

<form name="form1" action="1.php" method="post">
    <!-- ... -->
</form>

<form name="form2" action="2.php" method="post" target="foo">
    <!-- ... -->
</form>

<a onclick="submitform();">Go</a>

现在，如果我只提交 form2，它会在新选项卡中打开并且可以工作，但是当我尝试同时提交它们时，它只会提交 form1 我不知道为什么

任何帮助将不胜感激

谢谢你

【问题讨论】：

为什么要提交 2 个表格？只需提交 1 并在 1 个过程中完成两者的工作。
一次只能提交一种格式。在提交之前，您必须以某种方式将表单合并为一个。
要提交 2 个表单，其中一个需要使用 AJAX 调用。
@jcubic：最好两者都有。如果真正的提交导航到一个新页面，则可能会中止 ajax 页面。

标签： javascript forms submit

【解决方案1】：

一次只能提交一个表单。

document.forms["form1"].submit();
document.forms["form2"].submit();

第一行是向运行 PHP 的服务器发送一个 HTTP 请求。响应将覆盖当前页面，可能使用新的 HTML 文档。这意味着后续代码没有实际意义。即使它开始执行，任何更改都不会持续。

要解决此问题，请将两种表单合并为一个，或使用 AJAX 从服务器“幕后”（异步）获取您需要的信息，然后使用 JavaScript 手动更新页面。

【讨论】：

【解决方案2】：

Marc B的评论

您一次只能提交一种格式。在提交之前，您必须以某种方式将这些表单合并为一个。

是我的答案。

【讨论】：

【解决方案3】：

使用 jquery，您可以使用 ajax 调用发布表单

function submit_forms() {
   $.post('1.php', $('#form1').serialize(), function() {
      // do stuff when finish
   });
   $.post('2.php', $('#form2').serialize(), function() {
      // do stuff when finish
   });
}

【讨论】：

【解决方案4】：

您将需要使用 ajax 请求来提交至少一个表单和一些 jasvcript 以在您发送 ajax 请求时暂停表单的提交。

使用 jQuery 你会使用类似下面的东西

<form id="theForm" method="post" action="your/formhandler/on/your/server">
    <fieldset id="myInfo">
          // form fields to post data to you in here
    </fieldset>
    <fieldset id="theirInfo">
          // form fields to post data to the 3rd party in here
    </fieldset>
    <input type="submit" value="submit" />
</form>

使用适当的提交按钮将所有内容都放在一个表单中更容易访问，但 eth javascript 技术（稍作调整）也适用于 2 个单独的表单和一个 <a> 标签。

$(function (){ // run this code once teh page has finished loading
    $("#theForm").submit(function() {
         $.ajax({
            type: "post",
            url: "http://their/form/handler",
            data: $("#theirInfo").serialize() // off the top of my head I'm not 100% sure this will work, you may need to do $("#theirInfo").find("input,select,textarea").serialize()
         })
    });
})

您服务器上的表单处理程序将收到所有数据，但您可以忽略/丢弃不需要的位。

【讨论】：