Kaip grąžinti kelias pasirinktas parinktis „JavaScript“ formoje

Kelių pasirinkimų tvarkymas „JavaScript“ formose

Darbas su „JavaScript“ formomis yra įprasta užduotis, ypač apdorojant vartotojo įvestį, kurią reikia pateikti serveriui. Bendras iššūkis iškyla sprendžiant keli pasirinkimai formose, pvz., naudojant išskleidžiamąjį meniu „Pasirinkti kelis“. Pagrindiniai formų tvarkymo metodai gali neužfiksuoti visų pasirinktų parinkčių, todėl bus grąžinta tik paskutinė pasirinkta parinktis.

Šiame straipsnyje mes išnagrinėsime praktinį metodą, kaip užtikrinti, kad visos pasirinktos parinktys a kelių pasirinkimų išskleidžiamasis meniu yra užfiksuoti ir tinkamai pateikti naudojant „JavaScript“. Išnagrinėsime pakeitimus, kurių reikia norint pritaikyti darbo formą tokiai, kuri efektyviai tvarko kelis pasirinkimus. Šis metodas taip pat užtikrina, kad duomenis būtų galima sklandžiai pateikti į PHP API apdoroti.

Mūsų pradinis sprendimas puikiai tinka pavieniams pasirinkimams, bet kai pereiname prie kelių pasirinkimų lauko, svarbu atnaujinti „JavaScript“ logiką. Be tinkamų koregavimų, forma gali grąžinti tik paskutinę pasirinktą parinktį, kuri nėra pageidaujama. Norėdami tai išspręsti, reikia keisti, kaip renkame ir apdorojame formos duomenis.

Šio vadovo pabaigoje tiksliai žinosite, kaip atnaujinti formą ir „JavaScript“. kelios pasirinktos vertės efektyviai. Galėsite užtikrinti, kad visos pasirinktos parinktys būtų užfiksuotos ir tinkamai perduotos jūsų vidiniam įrenginiui.

Supratimas, kaip tvarkyti kelis pasirinkimus „JavaScript“ formose

Aukščiau pateiktais scenarijais siekiama išspręsti dažną interneto kūrimo problemą: kelių pasirinktų parinkčių pateikimas iš formos į serverį naudojant JavaScript. Pradinėje sąrankoje formoje buvo vienas pasirinkimo išskleidžiamasis meniu. Tačiau perėjus į a daugkartinis pasirinkimas išskleidžiamajame sąraše, buvo pateikta tik paskutinė pasirinkta parinktis. Norėdami tai išspręsti, modifikuojame „JavaScript“ kodą, kad surinktume visas pasirinktas parinktis prieš išsiųsdami jas į serverį per HTTP užklausą.

Pirmajame sprendime, FormData objektas naudojamas formos elementams užfiksuoti, bet kadangi jis traktuoja kelių pasirinkimų išskleidžiamuosius meniu kaip masyvus, turime pakartoti parinktis rankiniu būdu. Ciklas patikrina kiekvieną išskleidžiamojo meniu parinktį ir perkelia pasirinktas į masyvą. Tada šis masyvas sujungiamas į eilutės formatą, kuris gali būti siunčiamas į serverį. Naudojimas XMLHttpRequest užtikrina, kad duomenys būtų perduodami asinchroniškai, neatnaujinant puslapio. Šis metodas yra plačiai palaikomas, nors yra ir modernesnių metodų.

Antrasis sprendimas parodo, kaip tą pačią problemą išspręsti naudojant Gauti API. „Fetch“ siūlo švaresnį ir labiau pažadais pagrįstą metodą nei XMLHttpRequest, todėl lengviau atlikti asinchronines operacijas. Kaip ir pirmame pavyzdyje, pasirinktos parinktys surenkamos į masyvą ir konvertuojamos į eilutę. The atnešti Tada metodas siunčia šiuos duomenis į PHP užpakalinę programą. Šis metodas yra efektyvesnis ir plačiai taikomas šiuolaikinėse žiniatinklio programose dėl savo lankstumo ir intuityvesnės sintaksės.

Trečiasis sprendimas naudoja jQuery, populiarią „JavaScript“ biblioteką, kuri supaprastina daugelį DOM manipuliacijų ir „Ajax“ operacijų. Čia pasirinktos parinktys užfiksuojamos naudojant .val() metodas, kuris tiesiogiai grąžina pasirinktas reikšmes masyvo pavidalu. Tada masyvas siunčiamas per $.ajax(), supaprastintas būdas atlikti HTTP užklausas „jQuery“. Šis metodas reikalauja mažiau rankinio kodo nei ankstesniuose pavyzdžiuose, todėl tai yra greitas sprendimas, kai jQuery jau įtraukta į jūsų 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");
        }
    });
});

Formų duomenų tvarkymo optimizavimas naudojant „JavaScript“ keliems atrankoms

Kai dirbate su formomis, kelių pasirinkimų tvarkymas išskleidžiamajame meniu yra iššūkis, su kuriuo susiduria daugelis kūrėjų. Pagal numatytuosius nustatymus HTML formos užfiksuoja tik paskutinę pasirinktą reikšmę a daugkartinis pasirinkimas išskleidžiamąjį meniu, dėl kurio gali būti pateikti neišsamūs duomenys. Norint užtikrinti, kad visos pasirinktos parinktys būtų užfiksuotos, labai svarbu atnaujinti formos duomenų apdorojimo būdą prieš siunčiant juos į užpakalinę programą.

Vienas iš efektyviausių būdų yra naudoti FormData API, kartu su „JavaScript“ galimybe kartoti pasirinktas parinktis. Šis procesas užtikrina, kad visos pasirinktos reikšmės būtų užfiksuotos ir įtrauktos į serveriui siunčiamus duomenis. Atsižvelgiant į sąranką, taip pat gali tekti tvarkyti duomenų serializavimą, pvz., naudoti URL SearchParams, paruošti formos duomenis tokiu formatu, kurį gali lengvai išanalizuoti užpakalinės sistemos.

Kitas svarbus aspektas, į kurį reikia atsižvelgti, yra saugumas ir našumas. Nors formos duomenis tvarkyti nesudėtinga, norint išvengti pažeidžiamumo, pvz., įpurškimo atakų, labai svarbu patvirtinti įvestį tiek priekinėje, tiek vidinėje sistemoje. Be to, naudojant šiuolaikines API, pvz Gauti API užtikrina geresnį našumą ir leidžia lanksčiau tvarkyti klaidas, todėl formos duomenų pateikimo procesas tampa sklandesnis ir saugesnis.