Kuinka palauttaa useita valittuja vaihtoehtoja JavaScript-lomakkeessa

Useiden valintojen käsittely JavaScript-lomakkeissa

Lomakkeiden käsitteleminen JavaScriptissä on yleinen tehtävä, varsinkin kun käsitellään käyttäjän syötteitä, jotka on lähetettävä palvelimelle. Käsitellessäsi tulee yhteinen haaste useita valintoja lomakkeissa, kuten käyttämällä avattavaa "valitse useita" -valikkoa. Lomakkeiden peruskäsittelymenetelmät eivät välttämättä kaappaa kaikkia valittuja vaihtoehtoja, jolloin vain viimeksi valittu vaihtoehto palautetaan.

Tässä artikkelissa tutkimme käytännön lähestymistapaa varmistaaksemme, että kaikki valitut vaihtoehdot a avattava monivalintavalikko on kaapattu ja lähetetty oikein JavaScriptin avulla. Käymme läpi muutokset, joita tarvitaan työlomakkeen muokkaamiseksi sellaiseksi, joka käsittelee useita valintoja tehokkaasti. Tämä lähestymistapa varmistaa myös, että tiedot voidaan toimittaa saumattomasti PHP API:lle käsittelyä varten.

Alkuperäinen ratkaisumme toimii hyvin yksittäisissä valinnoissa, mutta kun siirrymme usean valinnan kenttään, on tärkeää päivittää JavaScript-logiikkamme. Ilman asianmukaisia ​​säätöjä lomake voi palauttaa vain viimeksi valitun vaihtoehdon, mikä ei ole toivottua toimintaa. Tämän korjaaminen edellyttää lomaketietojen keräämisen ja käsittelyn säätämistä.

Tämän oppaan loppuun mennessä tiedät tarkalleen, kuinka päivität lomakkeesi ja JavaScriptin käsiteltäväksi useita valittuja arvoja tehokkaasti. Voit varmistaa, että kaikki valitut vaihtoehdot kaapataan ja välitetään oikein taustajärjestelmääsi.

Ymmärtää kuinka käsitellä useita valintoja JavaScript-lomakkeissa

Yllä annetuilla skripteillä pyritään ratkaisemaan yleinen verkkokehityksen ongelma: useiden valittujen vaihtoehtojen lähettäminen lomakkeesta palvelimelle JavaScriptin avulla. Alkuperäisessä asetuksessa lomake sisälsi yhden valintavalikon. Kuitenkin, kun vaihdetaan a monivalinta avattavasta valikosta vain viimeksi valittu vaihtoehto lähetettiin. Tämän korjaamiseksi muokkaamme JavaScript-koodia keräämään kaikki valitut vaihtoehdot ennen niiden lähettämistä palvelimelle HTTP-pyynnön kautta.

Ensimmäisessä ratkaisussa FormData Objektia käytetään lomakeelementtien kaappaamiseen, mutta koska se käsittelee usean valinnan avattavia valikoita taulukoina, meidän on iteroitava vaihtoehdot manuaalisesti. Silmukka tarkistaa jokaisen vaihtoehdon pudotusvalikosta ja työntää valitut taulukkoon. Tämä matriisi yhdistetään sitten merkkijonomuotoon, joka voidaan lähettää palvelimelle. Käyttö XMLHttpRequest varmistaa, että tiedot lähetetään asynkronisesti ilman sivun päivittämistä. Tämä menetelmä on laajalti tuettu, vaikka nykyaikaisempiakin lähestymistapoja on olemassa.

Toinen ratkaisu osoittaa, kuinka käsitellä samaa ongelmaa käyttämällä Hae API. Fetch tarjoaa selkeämmän ja lupaavamman lähestymistavan kuin XMLHttpRequest, mikä helpottaa asynkronisten toimintojen käsittelyä. Kuten ensimmäisessä esimerkissä, valitut vaihtoehdot kootaan taulukkoon ja muunnetaan merkkijonoksi. The hakea menetelmä lähettää sitten nämä tiedot PHP-taustajärjestelmään. Tämä lähestymistapa on tehokkaampi ja laajalti käytössä nykyaikaisissa verkkosovelluksissa joustavuuden ja intuitiivisemman syntaksin ansiosta.

Kolmas ratkaisu käyttää jQueryä, suosittua JavaScript-kirjastoa, joka yksinkertaistaa monia DOM-käsittelyjä ja Ajax-toimintoja. Tässä valitut vaihtoehdot tallennetaan käyttämällä .val() menetelmä, joka palauttaa valitut arvot suoraan taulukon muodossa. Taulukko lähetetään sitten kautta $.ajax(), yksinkertaistettu tapa suorittaa HTTP-pyyntöjä jQueryssa. Tämä lähestymistapa vaatii vähemmän manuaalista koodia kuin edelliset esimerkit, joten se on nopea ratkaisu, kun jQuery on jo mukana projektissasi.

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

Lomaketietojen käsittelyn optimointi JavaScriptillä useita valintoja varten

Lomakkeiden kanssa työskennellessä useiden valintojen käsittely avattavassa valikossa on monien kehittäjien kohtaama haaste. Oletusarvoisesti HTML-lomakkeet sieppaavat vain viimeisen valitun arvon a:ssa monivalinta avattavasta valikosta, mikä voi johtaa epätäydellisten tietojen lähettämiseen. Jotta varmistetaan, että kaikki valitut vaihtoehdot tallennetaan, on erittäin tärkeää päivittää lomaketietojen käsittelytapa ennen sen lähettämistä taustajärjestelmään.

Yksi tehokkaimmista menetelmistä on käyttää FormData API yhdistettynä JavaScriptin kykyyn toistaa valittuja vaihtoehtoja. Tämä prosessi varmistaa, että kaikki valitut arvot kaapataan ja sisällytetään palvelimelle lähetettyihin tietoihin. Asetuksista riippuen saatat joutua käsittelemään myös tietojen sarjoittamista, kuten käyttöä URLSearchParams, valmistelemaan lomaketiedot muodossa, jonka taustajärjestelmät voivat helposti jäsentää.

Toinen tärkeä huomioitava näkökohta on turvallisuus ja suorituskyky. Vaikka lomaketietojen käsittely on yksinkertaista, syötteen vahvistaminen sekä käyttöliittymässä että taustajärjestelmässä on erittäin tärkeää haavoittuvuuksien, kuten injektiohyökkäysten, välttämiseksi. Lisäksi käyttämällä nykyaikaisia ​​sovellusliittymiä, kuten Hae API varmistaa paremman suorituskyvyn ja mahdollistaa joustavamman virheenkäsittelyn, mikä tekee lomaketietojen lähetysprosessista sujuvamman ja turvallisemman.