一键提交两份表格

Question

我有两种 HTML 表单，一种使用 PHP 在输入数据库时​​提交数据，另一种将用户定向到 paypal 付款页面，我的问题是用户必须提交这两种表单，这当然是我不希望他们这样做的必须做的。有没有办法对两种表单使用一个提交按钮？

（欢迎使用 JavaScript）

Answer 1

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

var f = document.forms.updateDB;
var postData = [];
for (var i = 0; i < f.elements.length; i++) {
    postData.push(encodeURIComponent(f.elements[i].name) + "=" +
        encodeURIComponent(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();

2023 update

原始答案仍然工作得很好，但这里有一个使用 fetch() 和现代语法的更新：

function submitBothForms() {
    const { updateDB, payPal } = document.forms;
    fetch(updateDB.action, {
        method: updateDB.method,
        headers: { "content-type": updateDB.enctype },
        body: new FormData(updateDB),
    });

    payPal.submit();
}

请注意，虽然通常您会 < code>await 对 fetch 的调用，我们在这里不这样做，因为，既然你想同时提交两个表单，你就不必关心 updateDB 表单是否被成功的。因此，延迟提交 PayPal 表格是没有意义的。

如果这不是您想要的，您可以序列化调用，并逐个提交表单，添加一些错误处理：

async function submitBothForms() {
    const { updateDB, payPal } = document.forms;
    const res = await fetch(updateDB.action, {
        method: updateDB.method,
        headers: { "content-type": updateDB.enctype },
        body: new FormData(updateDB),
    });
    if (!res.ok) {
        const err = new Error(`DB Update Failed! Status: ${res.status}`);
        const isJSON = res.headers.get("content-type") == "application/json";
        err.body = await (isJSON ? res.json() : res.text());
        throw err;
    }

    payPal.submit();
}

这样，如果第一个表单不成功，则会抛出错误，从而阻止第二个表单正在提交。我将继续处理错误并向您显示错误消息。

Answer 2

您应该能够使用 JavaScript 执行此操作：

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

如果您的表单有 ID：

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

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

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

在我看来，这是一种相当安全的方法：

（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_form2？）。

不过，我没有测试代码。

Answer 6

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

1- 使用 setTimeout()

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 不会同时提交两个表单。我们使用一个按钮不是同时提交两个表单，而是在几秒后提交。

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

Answer 7

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

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