Javascript 一键提交两份表格

Submit two forms with one button

提问by Alex Saidani

I have HTML two forms, one that submits data upon entry to a database using PHP, the other directs the user to a paypal payment page, my problem is that the user would have to submit both forms which of course I do not want them to have to do. Is there anyway to use one submit button for two forms?

我有两种 HTML 表单，一种在使用 PHP 输入数据库时​​提交数据，另一种将用户引导至贝宝付款页面，我的问题是用户必须同时提交这两种形式，我当然不希望他们这样做必须做。有没有办法为两个表单使用一个提交按钮？

(Javascript is welcome)

（欢迎使用 JavaScript）

采纳答案by James Johnson

You should be able to do this with JavaScript:

你应该可以用 JavaScript 做到这一点：

<input type="button" value="Click Me!" onclick="submitForms()" />

If your forms have IDs:

如果您的表单有 ID：

submitForms = function(){
    document.getElementById("form1").submit();
    document.getElementById("form2").submit();
}

If your forms don't have IDs but have names:

如果您的表单没有 ID 但有名称：

submitForms = function(){
    document.forms["form1"].submit();
    document.forms["form2"].submit();
}

回答by gilly3

A form submission causes the page to navigate away to the actionof the form. So, you cannot submit both forms in the traditional way. If you try to do so with JavaScript by calling form.submit()on each form in succession, each request will be aborted except for the last submission. So, you need to submit the first form asynchronously via JavaScript:

表单提交会导致页面导航到action表单的 。因此，您不能以传统方式提交这两种表格。如果您尝试使用 JavaScript 通过form.submit()连续调用每个表单来执行此操作，则除了最后一次提交之外，每个请求都将被中止。因此，您需要通过 JavaScript 异步提交第一个表单：

var f = document.forms.updateDB;
var postData = [];
for (var i = 0; i < f.elements.length; i++) {
    postData.push(f.elements[i].name + "=" + f.elements[i].value);
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "mypage.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(postData.join("&"));

document.forms.payPal.submit();

回答by RobG

You can submit the first form using AJAX, otherwise the submission of one will prevent the other from being submitted.

您可以使用 AJAX 提交第一个表单，否则提交一个将阻止另一个提交。

回答by Jonas Bystr?m

In Chrome and IE9 (and I'm guessing all other browsers too) only the latter will generate a socket connect, the first one will be discarded. (The browser detects this as both requests are sent within one JavaScript "timeslice" in your code above, and discards all but the last request.)

在 Chrome 和 IE9（我猜所有其他浏览器也是如此）中，只有后者会生成套接字连接，第一个将被丢弃。（浏览器会检测到这一点，因为这两个请求都是在上面代码中的一个 JavaScript“时间片”内发送的，并丢弃除最后一个请求之外的所有请求。）

If you instead have some event callback do the second submission (but before the reply is received), the socket of the first request will be cancelled. This is definitelynothing to recommend as the server in that case may well have handled your first request, but you will never know for sure.

如果你有一些事件回调做第二次提交（但在收到回复之前），第一个请求的套接字将被取消。这绝对没有什么值得推荐的，因为在这种情况下服务器可能已经处理了您的第一个请求，但您永远不会确定。

I recommend you use/generate a single request which you can transact server-side.

我建议您使用/生成一个可以在服务器端进行交易的请求。

回答by Kamafeather

The currently chosen best answer is too fuzzy to be reliable.

当前选择的最佳答案过于模糊，不可靠。

This feels to me like a fairly safe way to do it:

这对我来说是一种相当安全的方法：

(Javascript: using jQuery to write it simpler)

（Javascript：使用 jQuery 写得更简单）

$('#form1').submit(doubleSubmit);

function doubleSubmit(e1) {
    e1.preventDefault();
    e1.stopPropagation();
    var post_form1 = $.post($(this).action, $(this).serialize());

    post_form1.done(function(result) {
            // would be nice to show some feedback about the first result here
            $('#form2').submit();
        });
};

Post the first form without changing page, wait for the process to complete. Then post the second form. The second post will change the page, but you might want to have some similar code also for the second form, getting a second deferred object (post_form2?).

发布第一个表单而不更改页面，等待该过程完成。然后发布第二个表格。第二个帖子将更改页面，但您可能希望为第二个表单也有一些类似的代码，以获得第二个延迟对象（post_form2？）。

I didn't test the code, though.

不过，我没有测试代码。

回答by rezaSefiddashti

if you want to submit two forms with one button you need to do this:

如果你想一键提交两个表单，你需要这样做：

1- use setTimeout()

1-使用 setTimeout()

2- allow show pop up

2-允许显示弹出

<script>
function myFunction() {
setTimeout(function(){ document.getElementById("form1").submit();}, 3000);   
setTimeout(function(){ document.getElementById("form2").submit();}, 6000);   
}
</script>
<form  target="_blank" id="form1">
<input type="text">
<input type="submit">
</form>
<form target="_blank" id="form2">
<input type="text">
<input type="submit">
</form>

javascript doesn't submit two forms at the same time.we submit two forms with one button not at the same timebut after secounds.

javascript 不会同时提交两个表单。我们有一个按钮提交两种形式不能在同一时间，但secounds之后。

edit: when we use this code, browser doesn't allow pop up.
if you use this code for your software like me just set browser for show pop up but if you use it in designing site, browser is a barrier and code doesn't run.

编辑：当我们使用此代码时，浏览器不允许弹出。
如果您像我一样将此代码用于您的软件，只需将浏览器设置为显示弹出，但如果您在设计网站时使用它，浏览器是一个障碍，代码无法运行。

回答by endyourif

If you have a regular submit button, you could add an onclick event to it that does the follow:

如果你有一个常规的提交按钮，你可以向它添加一个 onclick 事件，它执行以下操作：

document.getElementById('otherForm').submit();