如何一键同时提交两个HTML表单？

如何用一个按钮提交两个表单

在 HTML 文档中，可以有多个具有不同操作的表单。然而，单独提交它们可能会给用户带来不便。本文探讨了解决这一困境的方法，即利用 JavaScript 同时提交两个表单。

第一个表单：将数据提交到数据库

第一个表单 updateDB 负责将数据发送到数据库使用 PHP 的数据库。以下是示例 HTML 代码：

<form>

第二个表单：重定向到 PayPal 付款页面

第二个表单 payPal 在提交后将用户引导至付款页面。

<form>

使用 JavaScript 提交两个表单

要同时提交两个表单，请按照以下步骤操作步骤：

1. 创建一个 JavaScript 函数来处理提交事件。
2. 在函数中，使用 XMLHttpRequest 或 fetch() 异步提交 updateDB 表单。
3. updateDB表单提交成功后，提交payPal

function submitBothForms() {
    // Submit updateDB form asynchronously via XMLHttpRequest
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "mypage.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(postData.join("&"));

    // Submit payPal form
    document.getElementById("payPal").submit();
}

使用 Fetch() 更新了代码

async function submitBothForms() {
    // Submit updateDB form asynchronously via fetch()
    const res = await fetch("mypage.php", {
        method: "POST",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        body: new FormData(updateDB),
    });
    if (!res.ok) throw new Error("DB Update Failed!");

    // Submit payPal form
    payPal.submit();
}

结论

通过利用 JavaScript，可以使用一个表单提交两个表单按钮。这种方法为用户提供了无缝体验，避免了多次提交的需要。请记住根据您的具体要求定制错误处理和消息传递。

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