如何一键同时提交两个HTML表单？-js教程-PHP中文网

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

Barbara Streisand

发布： 2024-12-02 05:58:17

原创

355 人浏览过

How to Submit Two HTML Forms Simultaneously with One Button?

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

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

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

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

<form>

登录后复制

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

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

<form>

登录后复制

使用 JavaScript 提交两个表单

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

创建一个 JavaScript 函数来处理提交事件。
在函数中，使用 XMLHttpRequest 或 fetch() 异步提交 updateDB 表单。
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();
}

登录后复制