Kako vrniti več izbranih možnosti v obrazcu JavaScript

Upravljanje z več izbirami v obrazcih JavaScript

Delo z obrazci v JavaScriptu je običajna naloga, zlasti pri obdelavi uporabniškega vnosa, ki ga je treba poslati strežniku. Pogost izziv se pojavi pri soočanju z več izbir v obrazcih, kot je uporaba spustnega menija »izberi več«. Metode osnovne obdelave obrazca morda ne bodo zajele vseh izbranih možnosti, zaradi česar bo vrnjena le zadnja izbrana možnost.

V tem članku bomo raziskali praktičen pristop za zagotovitev, da vse izbrane možnosti v a spustni meni za več izbir so zajeti in pravilno poslani z uporabo JavaScripta. Sprehodili se bomo skozi spremembe, ki so potrebne za prilagoditev delovne oblike v takšno, ki učinkovito obravnava več izbir. Ta pristop prav tako zagotavlja, da je mogoče podatke nemoteno predložiti API-ju PHP v obdelavo.

Naša začetna rešitev deluje dobro za posamezne izbire, ko pa preidemo na polje z več izbirami, je pomembno, da posodobimo našo logiko JavaScript. Brez ustreznih prilagoditev lahko obrazec vrne le zadnjo izbrano možnost, kar pa ni želeno vedenje. Odpravljanje tega vključuje spreminjanje načina zbiranja in obdelave podatkov obrazcev.

Ob koncu tega vodnika boste natančno vedeli, kako posodobiti svoj obrazec in JavaScript za obravnavo več izbranih vrednosti učinkovito. Zagotovili boste lahko, da so vse izbrane možnosti zajete in pravilno posredovane vašemu zaledju.

Razumevanje, kako obravnavati več izbir v obrazcih JavaScript

Namen zgornjih skriptov je rešiti pogost problem pri spletnem razvoju: pošiljanje več izbranih možnosti iz obrazca v strežnik z uporabo JavaScripta. V prvotni nastavitvi je obrazec vseboval en spustni meni za izbiro. Ko pa preklopite na a večkratna izbira spustnem meniju je bila predložena le zadnja izbrana možnost. Da bi rešili to težavo, spremenimo kodo JavaScript, da zbere vse izbrane možnosti, preden jih pošlje strežniku prek zahteve HTTP.

V prvi rešitvi je FormData object se uporablja za zajemanje elementov obrazca, a ker spustne menije za več izbir obravnava kot nize, moramo možnosti iterirati ročno. Zanka preveri vsako možnost v spustnem meniju in izbrane potisne v niz. Ta niz se nato združi v nizovni format, ki se lahko pošlje strežniku. Uporaba XMLHttpRequest zagotavlja, da se podatki prenašajo asinhrono, brez osveževanja strani. Ta metoda je široko podprta, čeprav obstajajo sodobnejši pristopi.

Druga rešitev prikazuje, kako rešiti isto težavo z uporabo Fetch API. Fetch ponuja čistejši in bolj na obljubah temelječ pristop kot XMLHttpRequest, zaradi česar je lažje obravnavati asinhrone operacije. Tako kot v prvem primeru so izbrane možnosti zbrane v matriko in pretvorjene v niz. The prinašati nato te podatke pošlje v zaledje PHP. Ta pristop je zaradi svoje prilagodljivosti in bolj intuitivne sintakse bolj učinkovit in razširjen v sodobnih spletnih aplikacijah.

Tretja rešitev uporablja jQuery, priljubljeno knjižnico JavaScript, ki poenostavi številne manipulacije DOM in operacije Ajax. Tukaj so izbrane možnosti zajete z uporabo .val() metoda, ki neposredno vrne izbrane vrednosti v obliki matrike. Matrika se nato pošlje prek $.ajax(), poenostavljen način izvajanja zahtev HTTP v jQuery. Ta pristop zahteva manj ročne kode kot prejšnji primeri, zaradi česar je hitra rešitev, ko je jQuery že vključen v vaš projekt.

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

Optimizacija obdelave podatkov obrazca z JavaScriptom za več izbir

Pri delu z obrazci je obravnavanje več izbir v spustnem meniju izziv, s katerim se srečujejo številni razvijalci. Obrazci HTML privzeto zajamejo samo zadnjo izbrano vrednost v a večkratna izbira spustni meni, kar lahko privede do predložitve nepopolnih podatkov. Če želite zagotoviti, da so zajete vse izbrane možnosti, je ključnega pomena, da posodobite način obdelave podatkov obrazca, preden jih pošljete v zaledje.

Ena najučinkovitejših metod je uporaba FormData API v kombinaciji z zmožnostjo JavaScripta za ponavljanje izbranih možnosti. Ta postopek zagotavlja, da so vse izbrane vrednosti zajete in vključene v podatke, poslane strežniku. Glede na nastavitev boste morda morali obravnavati tudi serializacijo podatkov, kot je uporaba URLSearchParams, za pripravo podatkov obrazca v obliki, ki jo lahko zlahka razčlenijo zaledni sistemi.

Drug pomemben vidik, ki ga je treba upoštevati, sta varnost in zmogljivost. Medtem ko je ravnanje s podatki obrazca preprosto, je preverjanje vnosa tako na sprednji strani kot na zadnji strani ključnega pomena, da se izognete ranljivostim, kot so napadi z vbrizgavanjem. Poleg tega z uporabo sodobnih API-jev, kot je Fetch API zagotavlja boljšo zmogljivost in omogoča bolj prilagodljivo obravnavo napak, zaradi česar je postopek pošiljanja podatkov obrazca lažji in varnejši.