Bagaimanakah Saya Boleh Menghantar Dua Borang dengan Satu Butang?

Menyerahkan Berbilang Borang dengan Satu Butang

Dalam pembangunan web, senario sering timbul di mana berbilang borang perlu diserahkan serentak. Walau bagaimanapun, penyerahan borang tradisional menavigasi halaman keluar, menghalang penyerahan berbilang borang. Ini menimbulkan persoalan: bagaimana anda boleh menyerahkan dua borang berbeza menggunakan satu butang?

Menggunakan JavaScript untuk Penyerahan Borang Tak Segerak

Untuk memintas isu navigasi halaman, kami boleh gunakan JavaScript untuk penyerahan borang tak segerak. Ini membolehkan penyerahan satu borang tanpa menjejaskan yang lain. Kod JavaScript berikut boleh digunakan untuk menyerahkan dua borang HTML, satu demi satu:

<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>

Dalam skrip ini:

1. Kami mendapatkan semula rujukan kepada kedua-dua borang menggunakan kaedah getElementById .
2. Fungsi fetch() digunakan untuk menyerahkan borang pertama secara tidak segerak.
3. Setelah borang pertama berjaya diserahkan, kami mencetuskan penyerahan borang kedua.
4. Kami mengendalikan kemungkinan ralat dalam blok tangkapan.

Ini pendekatan membolehkan kedua-dua borang diserahkan tanpa mengganggu aliran halaman.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghantar Dua Borang dengan Satu Butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!