Bagaimana untuk Menghantar Dua Borang HTML Serentak dengan Satu Butang?

Cara Menghantar Dua Borang dengan Satu Butang

Dalam dokumen HTML, adalah mungkin untuk mempunyai berbilang borang dengan tindakan yang berbeza. Walau bagaimanapun, menyerahkan kedua-duanya secara individu boleh menyusahkan pengguna. Artikel ini meneroka penyelesaian kepada dilema ini dengan menggunakan JavaScript untuk menyerahkan kedua-dua borang secara serentak.

Borang Pertama: Menyerahkan Data ke Pangkalan Data

Borang pertama, updateDB, bertanggungjawab untuk menghantar data ke pangkalan data menggunakan PHP. Berikut ialah contoh kod HTML:

<form>

Borang Kedua: Mengubah hala ke Halaman Pembayaran PayPal

Borang kedua, payPal, mengarahkan pengguna ke halaman pembayaran selepas penyerahan.

<form>

Menggunakan JavaScript untuk Menghantar Kedua-dua Borang

Untuk menyerahkan kedua-dua borang secara serentak, ikuti ini langkah:

1. Buat fungsi JavaScript untuk mengendalikan acara serahan.
2. Dalam fungsi tersebut, gunakan XMLHttpRequest atau fetch() untuk menyerahkan borang updateDB secara tidak segerak.
3. Selepas borang updateDB berjaya diserahkan, serahkan payPal borang.

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();
}

Kod Kemas Kini dengan 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();
}

Kesimpulan

Dengan memanfaatkan JavaScript, adalah wajar untuk menyerahkan dua borang dengan satu butang. Pendekatan ini memberikan pengalaman yang lancar untuk pengguna, mengelakkan keperluan untuk berbilang penyerahan. Ingat untuk menyesuaikan pengendalian ralat dan pemesejan berdasarkan keperluan khusus anda.

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