Cara Mengembalikan Berbilang Pilihan Terpilih dalam Borang JavaScript

Mengendalikan Pelbagai Pilihan dalam Borang JavaScript

Bekerja dengan borang dalam JavaScript adalah tugas biasa, terutamanya apabila mengendalikan input pengguna yang perlu diserahkan kepada pelayan. Cabaran biasa timbul apabila berhadapan dalam bentuk, seperti menggunakan lungsur turun "pilih berbilang". Kaedah pengendalian bentuk asas mungkin tidak menangkap semua pilihan yang dipilih, yang membawa kepada hanya pilihan terakhir yang dipilih dikembalikan.

Dalam artikel ini, kami akan meneroka pendekatan praktikal untuk memastikan semua pilihan yang dipilih dalam a ditangkap dan diserahkan dengan betul menggunakan JavaScript. Kami akan menelusuri pengubahsuaian yang diperlukan untuk menyesuaikan bentuk kerja menjadi satu yang mengendalikan berbilang pilihan dengan berkesan. Pendekatan ini juga memastikan bahawa data boleh dihantar dengan lancar ke API PHP untuk diproses.

Penyelesaian awal kami berfungsi dengan baik untuk pilihan tunggal, tetapi apabila kami beralih ke medan pilihan berbilang, adalah penting untuk mengemas kini logik JavaScript kami. Tanpa pelarasan yang betul, borang hanya boleh mengembalikan pilihan terakhir yang dipilih, yang bukan tingkah laku yang diingini. Membetulkan perkara ini melibatkan pengubahsuaian cara kami mengumpulkan dan memproses data borang.

Pada penghujung panduan ini, anda akan mengetahui dengan tepat cara mengemas kini borang dan JavaScript anda untuk dikendalikan dengan cekap. Anda akan dapat memastikan bahawa semua pilihan yang dipilih ditangkap dan dihantar dengan betul ke bahagian belakang anda.

Perintah	Contoh penggunaan
FormData()	Pembina ini mencipta objek FormData baharu yang menangkap elemen data borang. Ia digunakan untuk mengumpulkan input borang dengan mudah, termasuk muat naik fail, tanpa mengulangi setiap medan input secara manual.
getElementsByName()	Mendapatkan semula elemen HTML dengan khusus atribut. Dalam skrip, ia digunakan untuk menyasarkan elemen untuk menangkap semua pilihan yang dipilih.
options[]	Mengakses pilihan individu bagi elemen terpilih. Koleksi seperti tatasusunan ini membenarkan lelaran untuk menyemak pilihan yang dipilih, yang penting dalam mengendalikan berbilang pilihan.
selected	Digunakan dalam gelung untuk menentukan sama ada pilihan tertentu telah dipilih. Ia membantu menapis pilihan yang tidak dipilih dalam lungsur turun berbilang pilihan.
set()	Kaedah set() dipanggil pada objek FormData untuk mengemas kini atau menambah pasangan nilai kunci, seperti menambahkan semua nilai yang dipilih daripada menu lungsur berbilang pilih kepada data borang sebelum menghantarnya.
URLSearchParams()	Ini ialah API web yang menyerikan data borang ke dalam rentetan pertanyaan. Ia digunakan di sini untuk menukar objek FormData kepada format rentetan yang sesuai untuk permintaan HTTP.
XMLHttpRequest()	API yang digunakan secara meluas untuk menghantar permintaan HTTP. Ia digunakan untuk melaksanakan penyerahan data tak segerak dari bahagian hadapan ke pelayan, membolehkan halaman kekal responsif.
fetch()	Alternatif moden kepada XMLHttpRequest(), fetch() digunakan untuk membuat permintaan HTTP secara lebih intuitif dan dengan sintaks berasaskan janji. Ia menyediakan pengendalian permintaan rangkaian yang lebih bersih dan ringkas.
$.ajax()	Perintah jQuery yang memudahkan membuat permintaan HTTP tak segerak. Ia menyokong konfigurasi yang kompleks dan digunakan untuk mengendalikan berbilang pilihan dan menyerahkannya ke pelayan.

Memahami Cara Mengendalikan Pelbagai Pilihan dalam Borang JavaScript

Skrip yang disediakan di atas bertujuan untuk menyelesaikan masalah biasa dalam pembangunan web: menyerahkan berbilang pilihan yang dipilih daripada borang kepada pelayan menggunakan JavaScript. Dalam persediaan asal, borang mengandungi lungsur pilihan tunggal. Namun, apabila ditukar kepada a lungsur turun, hanya pilihan terakhir yang dipilih telah diserahkan. Untuk menangani perkara ini, kami mengubah suai kod JavaScript untuk mengumpulkan semua pilihan yang dipilih sebelum menghantarnya ke pelayan melalui permintaan HTTP.

Dalam penyelesaian pertama, yang objek digunakan untuk menangkap elemen bentuk, tetapi kerana ia menganggap dropdown berbilang pilihan sebagai tatasusunan, kita mesti mengulangi pilihan secara manual. Gelung menyemak setiap pilihan dalam menu lungsur dan menolak pilihan yang dipilih ke tatasusunan. Tatasusunan ini kemudiannya digabungkan ke dalam format rentetan yang boleh dihantar ke pelayan. Penggunaan memastikan bahawa data dihantar secara tidak segerak, tanpa memuat semula halaman. Kaedah ini disokong secara meluas, walaupun terdapat lebih banyak pendekatan moden.

Penyelesaian kedua menunjukkan cara menangani masalah yang sama menggunakan . Fetch menawarkan pendekatan berasaskan janji yang lebih bersih dan lebih daripada XMLHttpRequest, menjadikannya lebih mudah untuk mengendalikan operasi tak segerak. Seperti dalam contoh pertama, pilihan yang dipilih dikumpulkan ke dalam tatasusunan dan ditukar menjadi rentetan. The kaedah kemudian menghantar data ini ke bahagian belakang PHP. Pendekatan ini lebih cekap dan diterima pakai secara meluas dalam aplikasi web moden kerana fleksibiliti dan sintaks yang lebih intuitif.

Penyelesaian ketiga menggunakan jQuery, perpustakaan JavaScript popular yang memudahkan banyak manipulasi DOM dan operasi Ajax. Di sini, pilihan yang dipilih ditangkap menggunakan kaedah, yang secara langsung mengembalikan nilai yang dipilih dalam bentuk tatasusunan. Tatasusunan kemudiannya dihantar melalui , cara ringkas untuk melaksanakan permintaan HTTP dalam jQuery. Pendekatan ini memerlukan kurang kod manual daripada contoh sebelumnya, menjadikannya penyelesaian pantas apabila jQuery sudah disertakan dalam projek anda.

function submitForm() {
    var formData = new FormData(document.forms["rform"]);
    var selectedOptions = [];
    var selectElement = document.getElementsByName("inputa[]")[0];
    for (var i = 0; i < selectElement.options.length; i++) {
        if (selectElement.options[i].selected) {
            selectedOptions.push(selectElement.options[i].value);
        }
    }
    formData.set('inputa', selectedOptions.join(','));
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert("Submitted");
        }
    };
    xhttp.open("POST", "test2.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(new URLSearchParams(formData).toString());
}

function submitForm() {
    var formData = new FormData(document.forms["rform"]);
    var selectedOptions = [];
    var selectElement = document.getElementsByName("inputa[]")[0];
    for (var i = 0; i < selectElement.options.length; i++) {
        if (selectElement.options[i].selected) {
            selectedOptions.push(selectElement.options[i].value);
        }
    }
    formData.set('inputa', selectedOptions.join(','));
    fetch('test2.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams(formData).toString()
    })
    .then(response => response.text())
    .then(result => alert("Submitted"))
    .catch(error => console.error('Error:', error));
}

$('#submitBtn').on('click', function(e) {
    e.preventDefault();
    var selectedOptions = $('#inputa').val();
    $.ajax({
        type: 'POST',
        url: 'test2.php',
        data: { 'inputa': selectedOptions },
        success: function(response) {
            alert("Submitted");
        },
        error: function() {
            alert("Error occurred");
        }
    });
});

Mengoptimumkan Pengendalian Data Borang dengan JavaScript untuk Pelbagai Pilihan

Apabila bekerja dengan borang, mengendalikan berbilang pilihan dalam menu lungsur ialah cabaran yang dihadapi oleh ramai pembangun. Secara lalai, borang HTML hanya menangkap nilai pilihan terakhir dalam a lungsur turun, yang boleh menyebabkan data tidak lengkap diserahkan. Untuk memastikan semua pilihan yang dipilih ditangkap, adalah penting untuk mengemas kini cara data borang diproses sebelum menghantarnya ke bahagian belakang.

Salah satu kaedah yang paling berkesan ialah menggunakan API, digabungkan dengan keupayaan JavaScript untuk mengulangi pilihan yang dipilih. Proses ini memastikan bahawa semua nilai yang dipilih ditangkap dan dimasukkan ke dalam data yang dihantar ke pelayan. Bergantung pada persediaan, anda juga mungkin perlu mengendalikan pensirilan data, seperti menggunakan , untuk menyediakan data borang dalam format yang boleh dihuraikan dengan mudah oleh sistem bahagian belakang.

Satu lagi aspek penting untuk dipertimbangkan ialah keselamatan dan prestasi. Walaupun pengendalian data borang adalah mudah, mengesahkan input pada bahagian hadapan dan belakang adalah penting untuk mengelakkan kelemahan seperti serangan suntikan. Selain itu, menggunakan API moden seperti memastikan prestasi yang lebih baik dan membolehkan pengendalian ralat yang lebih fleksibel, menjadikan proses penyerahan data borang lebih lancar dan lebih selamat.

1. Bagaimanakah cara saya mendapatkan berbilang pilihan yang dipilih dalam JavaScript?
2. Anda boleh menggunakan kaedah untuk mendapatkan elemen pilih dan gelung melaluinya untuk mendapatkan semula nilai yang dipilih.
3. Apakah cara terbaik untuk menyerahkan berbilang pilihan melalui JavaScript?
4. Menggunakan objek, anda boleh mengumpulkan input borang dan memproses berbilang pilihan secara manual dengan mengulanginya dan menambah nilai pada data.
5. Bolehkah saya menggunakan API Ambil untuk penyerahan borang?
6. Ya, yang menyediakan cara moden untuk menghantar permintaan HTTP, termasuk data borang, dengan sintaks yang lebih bersih dan pengendalian ralat yang lebih baik.
7. Apakah perbezaan antara Fetch API dan XMLHttpRequest?
8. Walaupun kedua-duanya boleh menghantar permintaan HTTP, adalah lebih moden, menggunakan janji untuk pengendalian tak segerak yang lebih baik, sedangkan menggunakan panggilan balik.
9. Bagaimanakah saya boleh menangani ralat semasa menyerahkan borang?
10. Anda boleh memasukkan logik pengendalian ralat dalam atau kaedah untuk menangkap dan bertindak balas terhadap sebarang isu yang timbul semasa proses penyerahan borang.

Mengendalikan berbilang pilihan yang dipilih dalam borang JavaScript memerlukan penyesuaian cara data borang diproses. Dengan menggelung melalui pilihan yang dipilih dan menangkap setiap nilai, anda boleh memastikan bahawa semua pilihan disertakan semasa menyerahkan borang.

Sama ada menggunakan , , atau jQuery, setiap kaedah membenarkan penyerahan borang yang cekap dan selamat ke bahagian belakang PHP. Memilih pendekatan yang betul bergantung pada keperluan projek khusus anda dan alatan yang anda sediakan.