Több kiválasztott opció visszaküldése JavaScript-űrlapon

Több kijelölés kezelése JavaScript-űrlapokon

Az űrlapokkal való munka a JavaScriptben gyakori feladat, különösen akkor, ha olyan felhasználói bevitelt kell kezelni, amelyet el kell küldeni a szervernek. Egy közös kihívás adódik, amikor foglalkozunk több kijelölés űrlapokon, például a „Többnyire kijelölése” legördülő menü használatával. Előfordulhat, hogy az alapvető űrlapkezelési módszerek nem rögzítik az összes kiválasztott beállítást, így csak az utoljára kiválasztott beállítás kerül visszaadásra.

Ebben a cikkben egy gyakorlati megközelítést fogunk megvizsgálni annak biztosítására, hogy az összes kiválasztott opció a többszörös kijelölés legördülő menü rögzítik és megfelelően küldik be JavaScript használatával. Végigvezetjük azokat a módosításokat, amelyek ahhoz szükségesek, hogy egy munkaformát olyanná alakítsunk, amely több kijelölést is hatékonyan kezel. Ez a megközelítés azt is biztosítja, hogy az adatok zökkenőmentesen továbbíthatók egy PHP API-hoz feldolgozásra.

Kezdeti megoldásunk jól működik az egyszeri kijelöléseknél, de ha több kijelölési mezőre váltunk, fontos frissíteni JavaScript-logikánkat. Megfelelő módosítások nélkül előfordulhat, hogy az űrlap csak az utoljára választott opciót adja vissza, ami nem a kívánt viselkedés. Ennek kijavítása magában foglalja az űrlapadatok gyűjtésének és feldolgozásának módosítását.

Az útmutató végére pontosan tudni fogja, hogyan kell frissíteni az űrlapot és a kezelendő JavaScriptet több kiválasztott érték hatékonyan. Biztosítani tudja majd, hogy az összes kiválasztott beállítás rögzítésre kerül, és helyesen kerül át a háttérrendszerbe.

Több kijelölés kezelésének megértése JavaScript-űrlapokon

A fent bemutatott szkriptek a webfejlesztésben gyakori probléma megoldását célozzák: több kiválasztott opció beküldése egy űrlapról a szerverre JavaScript használatával. Az eredeti beállításban egy űrlap egyetlen kiválasztási legördülő menüt tartalmazott. Amikor azonban a többszörös kijelölés legördülő menüből csak az utoljára kiválasztott opció lett elküldve. Ennek megoldására módosítjuk a JavaScript kódot, hogy összegyűjtse az összes kiválasztott opciót, mielőtt HTTP-kéréssel elküldené azokat a szervernek.

Az első megoldásban a FormData Az objektum űrlapelemek rögzítésére szolgál, de mivel a többszörös kijelölésű legördülő listákat tömbként kezeli, manuálisan kell ismételnünk a beállításokat. A ciklus minden lehetőséget ellenőrzi a legördülő menüben, és a kiválasztottakat egy tömbbe tolja. Ezt a tömböt ezután egy karakterlánc-formátumba egyesítik, amely elküldhető a szervernek. A használata XMLHttpRequest biztosítja az adatok aszinkron továbbítását, az oldal frissítése nélkül. Ez a módszer széles körben támogatott, bár léteznek modernebb megközelítések.

A második megoldás bemutatja, hogyan lehet kezelni ugyanazt a problémát a API lekérése. A Fetch tisztább és ígéret-alapúabb megközelítést kínál, mint az XMLHttpRequest, megkönnyítve az aszinkron műveletek kezelését. Az első példához hasonlóan a kiválasztott opciókat a rendszer egy tömbbe gyűjti, és karaktersorozattá alakítja. A elhozni metódus elküldi ezeket az adatokat a PHP háttérrendszernek. Ez a megközelítés hatékonyabb és széles körben elterjedt a modern webalkalmazásokban rugalmassága és intuitívabb szintaxisa miatt.

A harmadik megoldás a jQuery-t, egy népszerű JavaScript-könyvtárat használja, amely számos DOM-manipulációt és Ajax-műveletet egyszerűsít. Itt a kiválasztott opciók rögzítése a .val() metódus, amely közvetlenül visszaadja a kiválasztott értékeket tömb formájában. A tömb ezután a következőn keresztül kerül elküldésre $.ajax(), a HTTP-kérések leegyszerűsített módja a jQuery alkalmazásban. Ez a megközelítés kevesebb kézi kódot igényel, mint az előző példák, így gyors megoldást jelent, ha a jQuery már szerepel a projektben.

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

Űrlapadatok kezelésének optimalizálása JavaScript segítségével több kijelöléshez

Űrlapokkal végzett munka során a több kijelölés legördülő menüben történő kezelése kihívást jelent sok fejlesztő számára. Alapértelmezés szerint a HTML-űrlapok csak az a-ban utoljára kiválasztott értéket rögzítik többszörös kijelölés legördülő menüből, ami hiányos adatok benyújtásához vezethet. Az összes kiválasztott beállítás rögzítése érdekében kulcsfontosságú, hogy frissítse az űrlapadatok feldolgozásának módját, mielőtt elküldi azokat a háttérrendszernek.

Az egyik leghatékonyabb módszer a FormData API, kombinálva a JavaScript azon képességével, hogy ismételje meg a kiválasztott opciókat. Ez a folyamat biztosítja, hogy az összes kiválasztott érték rögzítésre kerüljön, és szerepeljen a kiszolgálónak küldött adatokban. A beállítástól függően előfordulhat, hogy kezelnie kell az adatok sorosítását, például a használatát URLSearchParams, hogy az űrlapadatokat a háttérrendszerek által könnyen értelmezhető formátumban készítse elő.

Egy másik fontos szempont a biztonság és a teljesítmény. Míg az űrlapadatok kezelése egyszerű, a bemenet érvényesítése az előtérben és a háttérben egyaránt kritikus fontosságú a biztonsági rések, például az injekciós támadások elkerülése érdekében. Ezenkívül modern API-k használatával, mint például a API lekérése jobb teljesítményt biztosít, és rugalmasabb hibakezelést tesz lehetővé, gördülékenyebbé és biztonságosabbá téve az űrlapadatok benyújtásának folyamatát.