JavaScript Formunda Birden Çok Seçili Seçeneği Döndürme

JavaScript Formlarında Çoklu Seçimi İşleme

JavaScript'te formlarla çalışmak, özellikle sunucuya gönderilmesi gereken kullanıcı girişini işlerken yaygın bir iştir. Sorunlarla uğraşırken ortak bir zorluk ortaya çıkıyor çoklu seçimler "Birden çok seç" açılır menüsünü kullanmak gibi formlarda. Temel form işleme yöntemleri seçilen tüm seçenekleri yakalayamayabilir ve yalnızca son seçilen seçeneğin döndürülmesine yol açabilir.

Bu makalede, seçilen tüm seçeneklerin bir arada olmasını sağlamak için pratik bir yaklaşımı inceleyeceğiz. çoklu seçim açılır menüsü yakalanır ve JavaScript kullanılarak düzgün bir şekilde gönderilir. Çalışan bir formu birden fazla seçimi etkili bir şekilde gerçekleştirecek bir forma uyarlamak için gereken değişiklikleri gözden geçireceğiz. Bu yaklaşım aynı zamanda verilerin işlenmek üzere bir PHP API'sine sorunsuz bir şekilde gönderilebilmesini de sağlar.

İlk çözümümüz tekli seçimler için iyi çalışıyor ancak çoklu seçim alanına geçtiğimizde JavaScript mantığımızı güncellemek önemlidir. Uygun ayarlamalar yapılmazsa form yalnızca seçilen son seçeneği döndürebilir; bu da istenen davranış değildir. Bunu düzeltmek, form verilerini nasıl topladığımızı ve işlediğimizi değiştirmeyi içerir.

Bu kılavuzun sonunda formunuzu ve JavaScript'inizi nasıl güncelleyeceğinizi tam olarak öğreneceksiniz. birden fazla seçili değer verimli bir şekilde. Seçilen tüm seçeneklerin yakalandığından ve arka ucunuza doğru şekilde aktarıldığından emin olabileceksiniz.

JavaScript Formlarında Çoklu Seçimin Nasıl İşleneceğini Anlamak

Yukarıda verilen komut dosyaları, web geliştirmede yaygın bir sorunu çözmeyi amaçlamaktadır: birden fazla seçilen seçeneğin bir formdan JavaScript kullanarak bir sunucuya gönderilmesi. Orijinal kurulumda bir form, tek bir seçim açılır menüsü içeriyordu. Ancak bir anahtara geçildiğinde çoklu seçim açılır menüde yalnızca son seçilen seçenek gönderildi. Bu sorunu çözmek için, seçilen tüm seçenekleri bir HTTP isteği yoluyla sunucuya göndermeden önce toplayacak şekilde JavaScript kodunu değiştiriyoruz.

İlk çözümde, FormVerileri nesne form öğelerini yakalamak için kullanılır, ancak çoklu seçimli açılır menüleri diziler olarak ele aldığından, seçenekleri manuel olarak yinelememiz gerekir. Döngü, açılır menüdeki her seçeneği kontrol eder ve seçilenleri bir diziye iter. Bu dizi daha sonra sunucuya gönderilebilecek bir dize biçiminde birleştirilir. Kullanımı XMLHttpRequest sayfayı yenilemeden verilerin asenkron olarak iletilmesini sağlar. Daha modern yaklaşımlar mevcut olmasına rağmen, bu yöntem geniş çapta desteklenmektedir.

İkinci çözüm, aynı problemin aşağıdakileri kullanarak nasıl çözüleceğini gösterir: API'yi getir. Fetch, XMLHttpRequest'e göre daha temiz ve daha fazla söze dayalı bir yaklaşım sunarak eşzamansız işlemleri yönetmeyi kolaylaştırır. İlk örnekte olduğu gibi seçilen seçenekler bir dizi halinde toplanıp bir dizeye dönüştürülür. gidip getirmek yöntem daha sonra bu verileri PHP arka ucuna gönderir. Bu yaklaşım daha verimlidir ve esnekliği ve daha sezgisel söz dizimi nedeniyle modern web uygulamalarında yaygın olarak benimsenir.

Üçüncü çözüm, birçok DOM manipülasyonunu ve Ajax işlemini basitleştiren popüler bir JavaScript kitaplığı olan jQuery'den yararlanır. Burada, seçilen seçenekler kullanılarak yakalanır. .val() Seçilen değerleri doğrudan bir dizi biçiminde döndüren yöntem. Dizi daha sonra aracılığıyla gönderilir $.ajax()jQuery'de HTTP isteklerini gerçekleştirmenin basitleştirilmiş bir yolu. Bu yaklaşım önceki örneklere göre daha az manuel kod gerektirir, bu da jQuery'nin projenize zaten dahil edilmesi durumunda hızlı bir çözüm olmasını sağlar.

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

Çoklu Seçimler için Form Verisi İşlemeyi JavaScript ile Optimize Etme

Formlarla çalışırken, açılır menüde birden fazla seçim yapmak birçok geliştiricinin karşılaştığı bir zorluktur. Varsayılan olarak, HTML formları yalnızca son seçilen değeri bir dosyada yakalar. çoklu seçim eksik verilerin gönderilmesine yol açabilecek açılır menü. Seçilen tüm seçeneklerin yakalandığından emin olmak için form verilerinin arka uca gönderilmeden önce işlenme şeklini güncellemek çok önemlidir.

En etkili yöntemlerden biri kullanmaktır. FormVerileri API, JavaScript'in seçilen seçenekler üzerinde yineleme yeteneğiyle birleştirildi. Bu işlem, seçilen tüm değerlerin yakalanıp sunucuya gönderilen verilere dahil edilmesini sağlar. Kuruluma bağlı olarak, veri serileştirme işlemlerini de gerçekleştirmeniz gerekebilir. URLAramaParamlarıForm verilerinin arka uç sistemler tarafından kolayca ayrıştırılabilecek formatta hazırlanması.

Dikkate alınması gereken bir diğer önemli husus güvenlik ve performanstır. Form verilerinin işlenmesi basit olsa da, girişin hem ön uçta hem de arka uçta doğrulanması, enjeksiyon saldırıları gibi güvenlik açıklarından kaçınmak için kritik öneme sahiptir. Ek olarak, aşağıdakiler gibi modern API'leri kullanarak: API'yi getir daha iyi performans sağlar ve daha esnek hata yönetimine olanak tanıyarak form verilerinin gönderilmesi sürecini daha sorunsuz ve daha güvenli hale getirir.