堆栈内存溢出
  繁体   English   中英

使用 JavaScript 同时提交 2 个表单

[英]Submitting 2 forms at the same time using JavaScript

 原文  2013-07-09 05:49:57  5   5    javascript/ html/ forms

问题描述

我正在尝试使用 javascript 同时提交 2 个表单。 但是，似乎只打开了第二次提交，而不是第一次。

代码相当简单：

<html>
<body>
<form id="report_0" method="POST" target="_blank" action="https://www.google.com">
   <input type="hidden" name="test1" value="1">
   <input type="submit" value="report_0">
</form>
<form id="report_1" method="POST" target="_blank" action="https://www.google.com">
   <input type="hidden" name="test2" value="2">
   <input type="submit" value="report_1">
</form>
<script>
    document.getElementById("report_0").submit();
    document.getElementById("report_1").submit();
    </script>
</body>
</html>

我不能使用 ajax 或等效的，因为它必须是“本机”POST（由于 CORS 问题）

我在某处读到您不能一次提交 2 个表单，这对我来说没有意义。 我尝试将目标从“_blank”更改为“form1”和“form2”，但仍然没有。

您的帮助将不胜感激:)

编辑

这是我实际使用的：

for (....) {
       var form = document.createElement("form");
       form.setAttribute("name", "report_"+i);
       form.setAttribute("method", "POST");
       form.setAttribute("target", "_blank");
       form.setAttribute("action", action);

       for (var key in parms) {
           var field = document.createElement("input");
           field.setAttribute("type", "hidden");
           field.setAttribute("name", key);
           field.setAttribute("value", parms[key]);
           form.appendChild(field);
       }
       console.log(form);
       document.body.appendChild(form);
       form.submit();
       document.body.removeChild(form);
}

5 个解决方案

解决方案1
 3  2016-01-06 10:20:59

不是最漂亮的方式，但我认为无论如何分享它会很好。 我最终通过使用setTimeout解决了它：

var requestDelay = 2000;
document.getElementById("form-a").submit();

setTimeout(function() {
    document.getElementById("form-b").submit();
}, requestDelay);

这样，它会等到form A （可能，估计为 2 秒）已提交，然后提交form B 。 您可能需要使用requestDelay来满足您的需求。

解决方案2
 1  2013-07-09 05:59:46

你不能这样做。 当一个表单被提交时，整个页面被“销毁”并且表单的响应被加载为一个新页面。

JavaScript 代码运行单线程，所以基本上你会同时在两个表单上触发提交事件，并且只有当你的 JS 完成时，浏览器才会再次接管并尝试执行你给它的任务队列。

因此，如果您想以非 AJAX 方式“正常”提交两种表单，您必须：

  1. 以某种方式将第二种形式的值存储在客户端上（cookie、localstorage 等）
  2. 提交第一个表单，这会导致页面看起来完全相同，只是内容中的某处有一些触发器让您的 JS 代码看到第一个表单已经提交。
  3. 将值恢复为第二种形式（服务器不知道这些值，因为它们尚未提交）
  4. 提交第二个表格。

解决方案3
 0  2013-07-09 06:00:45

表单提交是对服务器的同步调用（HttpRequest）。 因此，无法提交第二个表格。 您期望提交多个表单，而不是异步地依赖另一个表单。 所以，像 AJAX 这样的 API 将解决这个问题，但你不是在寻找那个。

如果您的设计允许您在页面中保留多个框架/ iframe，请将这些表单保留在不同的框架/ iframe 中。 使用这种方法，您可以从父页面提交多个表单。

如果您可以解释一次提交多个表单的要求以及您的限制，您可能会得到更好的回应。

解决方案4
 0  2013-07-09 06:07:52

我们可以通过 syn/asyn 两种方式来实现，请参考下面的示例链接......我希望这会对你有所帮助。

http://yogendrakrsingh.blogspot.in/2010/03/javascript-trick-submitting-multiple.html

或者

借助序列化超过第三个隐藏的 mwe 可以实现。 已经发过了，请看下面的链接

是否可以同时提交两个表格？

解决方案5
 0  2022-06-28 12:06:03

如果您尝试将第一个表单及其信息提交到与第二个表单相同的页面，这是一个解决方案：

创建一个表单，将两者的字段结合起来并提交。 这是对您的代码的修改：

var form = document.createElement("form");
form.setAttribute("name", "report");
form.setAttribute("method", "POST");
form.setAttribute("target", "_blank");
form.setAttribute("action", action);
for (....) {

    for (var key in parms) {
        var field = document.createElement("input");
        field.setAttribute("type", "hidden");
        field.setAttribute("name", key);
        field.setAttribute("value", parms[key]);
        form.appendChild(field);
    }
    console.log(form);
}
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用 JavaScript 提交 forms 提交表单并使用值（JavaScript） 使用ajax一次将包含JavaScript的页面上的所有表单提交给Django 使用 JQuery 在 javascript 中通过 1 个操作提交两个 forms 使用JavaScript提交多种表单（不刷新） Javascript在页面上提交所有表单 使用JavaScript提交HTML格式的多个表单 提交具有操作属性集的表单，同时有一个javascript代码可处理提交 仅使用javascript验证表单并阻止用户提交JS禁用表单？ 如何使用Jquery或Javascript同时保存两个不同的表单？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM