如何通过一个按钮同时提交两个表单？

使用一个按钮提交两个表单

使用一个按钮提交两个表单可能看起来是一项简单的任务，但使用传统的方法是不可能的表单提交方法。这是因为提交表单会从当前页面导航到表单中指定的操作。

解决方案：异步表单提交

要同时提交两个表单，我们需要绕过传统的表单提交过程。我们可以通过 JavaScript 异步提交第一个表单来实现此目的，从而允许我们在不干扰第一个表单的情况下提交第二个表单。

JavaScript 异步表单提交：

The以下 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("&"));

异步提交第一个表单后，我们可以使用标准表单submit()方法立即提交第二个表单：

document.forms.payPal.submit();

更新的解决方案（2023）：

更新的解决方案利用fetch()和现代 JavaScript 语法：

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

    payPal.submit();
}

与原始解决方案相比，此更新的解决方案提供了更简洁、更高效的实现回答。

以上是如何通过一个按钮同时提交两个表单？的详细内容。更多信息请关注PHP中文网其他相关文章！