Bagaimanakah Saya Boleh Menghantar Dua Borang Serentak dengan Satu Butang?

Serahkan Dua Borang dengan Satu Butang

Menyerahkan dua borang dengan satu butang mungkin kelihatan seperti tugas yang mudah, tetapi tidak mungkin menggunakan kaedah tradisional kaedah penyerahan borang. Ini kerana penyerahan borang akan menavigasi keluar dari halaman semasa ke tindakan yang dinyatakan dalam borang.

Penyelesaian: Penyerahan Borang Tak Segerak

Untuk menyerahkan kedua-dua borang secara serentak, kita perlu memintas proses penyerahan borang tradisional. Kami boleh mencapai ini dengan menyerahkan borang pertama secara tak segerak melalui JavaScript, membenarkan kami menyerahkan borang kedua tanpa mengganggu yang pertama.

Penyerahan Borang Async JavaScript:

The kod JavaScript berikut menunjukkan cara menyerahkan borang pertama secara tidak segerak:

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("&"));

Setelah borang pertama diserahkan secara tidak segerak, kami boleh segera menyerahkan borang kedua menggunakan kaedah submit() borang standard:

document.forms.payPal.submit();

Penyelesaian Kemas Kini (2023):

Penyelesaian yang dikemas kini menggunakan fetch () dan sintaks JavaScript moden:

function submitBothForms() {
    const { updateDB, payPal } = document.forms;
    fetch(updateDB.action, {
        method: updateDB.method,
        headers: { "content-type": updateDB.enctype },
        body: new FormData(updateDB),
    });

    payPal.submit();
}

Penyelesaian yang dikemas kini ini menyediakan pelaksanaan yang lebih ringkas dan berprestasi berbanding dengan jawapan asal.

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