如何一鍵提交兩份表格？

透過一個按鈕提交多個表單

在 Web 開發中，經常會出現需要同時提交多個表單的場景。然而，傳統的表單提交會導航到頁面之外，從而阻礙了多個表單的提交。這就提出了一個問題：如何使用一個按鈕提交兩個不同的表單？

使用 JavaScript 進行非同步表單提交

要繞過頁面導航問題，我們可以利用 JavaScript 進行非同步表單提交。這樣可以提交一種表單而不影響另一種表單。以下JavaScript 程式碼可用於提交兩個HTML 表單，一個接一個：

<script>
// Get references to both forms
var updateDBForm = document.getElementById("form1");
var payPalForm = document.getElementById("form2");

// Submit the first form asynchronously using fetch()
fetch(updateDBForm.action, {
  method: updateDBForm.method,
  headers: { "Content-Type": updateDBForm.enctype },
  body: new FormData(updateDBForm)
})
.then(function(response) {
  // Submit the second form
  payPalForm.submit();
})
.catch(function(error) {
  // Handle any errors
});
</script>

在此腳本中：

1. 我們使用getElementById 方法來擷取這兩個表單的參考.
2. fetch() 函數用於非同步提交第一個表單。
3. 一旦第一個表單表單提交成功，我們就會觸發第二個表單的提交。
4. 我們處理 catch 區塊中的潛在錯誤。

這種方法允許在不中斷流程的情況下提交兩個表單頁面的。

以上是如何一鍵提交兩份表格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！