Kuidas tagastada JavaScripti vormis mitu valitud suvandit

Mitme valiku käsitlemine JavaScripti vormides

JavaScriptis vormidega töötamine on tavaline ülesanne, eriti kui käsitlete kasutaja sisendit, mis tuleb serverisse esitada. Ühine väljakutse tekib sellega tegelemisel mitu valikut vormides, näiteks kasutades rippmenüüd "vali mitu". Põhilised vormitöötlusmeetodid ei pruugi hõlmata kõiki valitud suvandeid, mistõttu tagastatakse ainult viimati valitud suvand.

Selles artiklis uurime praktilist lähenemisviisi, et tagada kõigi a mitme valiku rippmenüü on püütud ja JavaScripti abil õigesti esitatud. Vaatame läbi muudatused, mis on vajalikud töövormi kohandamiseks selliseks, mis käsitleb tõhusalt mitut valikut. See lähenemisviis tagab ka andmete sujuva töötlemise PHP API-le edastamise.

Meie esialgne lahendus töötab hästi üksikute valikute puhul, kuid kui läheme üle mitme valiku väljale, on oluline värskendada JavaScripti loogikat. Ilma õigete kohandusteta võib vorm tagastada ainult viimati valitud valiku, mis ei ole soovitud käitumine. Selle parandamine hõlmab vormiandmete kogumise ja töötlemise kohandamist.

Selle juhendi lõpuks teate täpselt, kuidas värskendada oma vormi ja käsitletavat JavaScripti mitu valitud väärtust tõhusalt. Saate tagada, et kõik valitud suvandid jäädvustatakse ja edastatakse teie taustaprogrammi õigesti.

Mõistmine, kuidas käsitleda mitut valikut JavaScripti vormides

Ülaltoodud skriptide eesmärk on lahendada veebiarenduses levinud probleem: vormilt mitme valitud valiku esitamine JavaScripti abil serverisse. Algses seadistuses sisaldas vorm ühte valiku rippmenüüd. Kui aga minna üle a mitmekordne valik rippmenüüst esitati ainult viimati valitud valik. Selle lahendamiseks muudame JavaScripti koodi, et koguda kõik valitud valikud enne nende saatmist serverisse HTTP-päringu kaudu.

Esimeses lahenduses on FormData Objekti kasutatakse vormielementide hõivamiseks, kuid kuna see käsitleb mitme valiku rippmenüüsid massiividena, peame valikuid käsitsi kordama. Silmus kontrollib iga rippmenüü valikut ja lükkab valitud massiivi. See massiiv liidetakse seejärel stringivormingusse, mille saab serverisse saata. Kasutamine XMLHttpRequest tagab andmete asünkroonse edastamise, ilma lehte värskendamata. Seda meetodit toetatakse laialdaselt, kuigi on olemas kaasaegsemad lähenemisviisid.

Teine lahendus näitab, kuidas lahendada sama probleemi, kasutades Tõmba API. Fetch pakub puhtamat ja lubaduspõhist lähenemist kui XMLHttpRequest, muutes asünkroonsete toimingute haldamise lihtsamaks. Nagu esimeses näites, kogutakse valitud suvandid massiivi ja teisendatakse stringiks. The tooma meetod saadab need andmed PHP taustaprogrammi. See lähenemine on paindlikkuse ja intuitiivsema süntaksi tõttu tõhusam ja tänapäevastes veebirakendustes laialdaselt kasutusele võetud.

Kolmas lahendus kasutab jQueryt, populaarset JavaScripti teeki, mis lihtsustab paljusid DOM-i manipuleerimisi ja Ajaxi toiminguid. Siin on valitud suvandid jäädvustatud kasutades .val() meetod, mis tagastab valitud väärtused otse massiivi kujul. Seejärel saadetakse massiiv läbi $.ajax(), lihtsustatud viis HTTP-päringute tegemiseks jQuerys. See lähenemisviis nõuab vähem käsitsi koodi kui eelnevad näited, muutes selle kiireks lahenduseks, kui jQuery on teie projekti juba kaasatud.

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

Vormiandmete haldamise optimeerimine JavaScriptiga mitme valiku jaoks

Vormidega töötamisel on mitme valiku käsitlemine rippmenüüs väljakutse, millega paljud arendajad kokku puutuvad. Vaikimisi hõivavad HTML-vormid ainult a-s viimase valitud väärtuse mitmekordne valik rippmenüüst, mis võib viia mittetäielike andmete esitamiseni. Kõigi valitud valikute jäädvustamise tagamiseks on oluline värskendada vormiandmete töötlemisviisi enne nende taustaprogrammi saatmist.

Üks tõhusamaid meetodeid on kasutada FormData API koos JavaScripti võimega korduda valitud valikute üle. See protsess tagab, et kõik valitud väärtused püütakse kinni ja kaasatakse serverisse saadetavatesse andmetesse. Olenevalt seadistusest peate võib-olla tegelema ka andmete serialiseerimisega, näiteks kasutades URLSearchParams, et koostada vormiandmed vormingus, mida taustasüsteemid saavad hõlpsasti sõeluda.

Teine oluline aspekt, mida tuleb arvestada, on turvalisus ja jõudlus. Kuigi vormiandmete käsitlemine on lihtne, on turvaaukude, näiteks süstimisrünnakute, vältimiseks ülioluline sisendi kinnitamine nii esi- kui ka taustaprogrammis. Lisaks kasutades kaasaegseid API-sid, nagu Tõmba API tagab parema jõudluse ja võimaldab paindlikumalt vigade käsitlemist, muutes vormiandmete esitamise protsessi sujuvamaks ja turvalisemaks.