如何透過一個按鈕同時提交兩張表單？

使用一個按鈕提交兩個表單

使用一個按鈕提交兩個表單可能看起來是一項簡單的任務，但使用傳統的方法是不可能的表單提交方法。這是因為提交表單會從目前頁面導覽到表單中指定的操作。

解決方案：非同步表單提交

要同時提交兩個表單，我們需要繞過傳統的表單提交過程。我們可以透過 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中文網其他相關文章！