如何一鍵同時提交兩個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中文網其他相關文章！