Како вратити више изабраних опција у ЈаваСцрипт обрасцу

Руковање вишеструким селекцијама у ЈаваСцрипт обрасцима

Рад са обрасцима у ЈаваСцрипт-у је уобичајен задатак, посебно када се рукује корисничким уносом који треба да се пошаље на сервер. Уобичајени изазов се јавља када се ради са више избора у облицима, као што је коришћење падајућег менија „изабери вишеструко“. Основни методи руковања обрасцима можда неће обухватити све изабране опције, што доводи до враћања само последње изабране опције.

У овом чланку ћемо истражити практичан приступ како бисмо осигурали да све одабране опције у а падајући мени за вишеструки избор су снимљени и правилно послати помоћу ЈаваСцрипт-а. Проћи ћемо кроз модификације потребне за прилагођавање радног облика у онај који ефикасно рукује вишеструким одабирима. Овај приступ такође осигурава да се подаци могу неприметно послати ПХП АПИ-ју на обраду.

Наше почетно решење добро функционише за појединачне селекције, али када пређемо на поље са вишеструким избором, важно је да ажурирамо нашу ЈаваСцрипт логику. Без одговарајућих подешавања, образац може да врати само последњу изабрану опцију, што није жељено понашање. Исправљање овога укључује подешавање начина на који прикупљамо и обрађујемо податке обрасца.

До краја овог водича ћете тачно знати како да ажурирате образац и ЈаваСцрипт за руковање више изабраних вредности ефикасно. Бићете у могућности да осигурате да су све изабране опције снимљене и исправно прослеђене вашем бацкенду.

Разумевање како руковати вишеструким селекцијама у ЈаваСцрипт обрасцима

Горе наведене скрипте имају за циљ да реше уобичајени проблем у веб развоју: слање више изабраних опција из обрасца на сервер помоћу ЈаваСцрипт-а. У првобитном подешавању, образац је садржао један падајући мени за избор. Међутим, када се пређе на а вишеструки избор падајући мени, послата је само последња изабрана опција. Да бисмо ово решили, мењамо ЈаваСцрипт код да прикупи све изабране опције пре него што их пошаљемо серверу путем ХТТП захтева.

У првом решењу, ФормДата објекат се користи за хватање елемената обрасца, али пошто третира падајуће меније са вишеструким избором као низове, морамо ручно да понављамо опције. Петља проверава сваку опцију у падајућем менију и гура изабране у низ. Овај низ се затим спаја у формат стринга који се може послати на сервер. Употреба од КСМЛХттпРекуест обезбеђује да се подаци преносе асинхроно, без освежавања странице. Овај метод је широко подржан, иако постоје модернији приступи.

Друго решење показује како да решите исти проблем користећи Дохвати АПИ. Фетцх нуди чишћи приступ заснован на обећањима него КСМЛХттпРекуест, што олакшава руковање асинхроним операцијама. Као у првом примеру, изабране опције се скупљају у низ и конвертују у стринг. Тхе донети метода затим шаље ове податке ПХП бацкенд-у. Овај приступ је ефикаснији и широко прихваћен у модерним веб апликацијама због своје флексибилности и интуитивније синтаксе.

Треће решење користи јКуери, популарну ЈаваСцрипт библиотеку која поједностављује многе ДОМ манипулације и Ајак операције. Овде се изабране опције снимају помоћу .вал() метод, који директно враћа изабране вредности у облику низа. Низ се затим шаље путем $.ајак(), поједностављени начин обављања ХТТП захтева у јКуери-ју. Овај приступ захтева мање ручног кода од претходних примера, што га чини брзим решењем када је јКуери већ укључен у ваш пројекат.

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

Оптимизација руковања подацима обрасца помоћу ЈаваСцрипт-а за више избора

Када радите са обрасцима, руковање вишеструким селекцијама у падајућем менију је изазов са којим се сусрећу многи програмери. Подразумевано, ХТМЛ обрасци обухватају само последњу изабрану вредност у а вишеструки избор падајући мени, што може довести до слања непотпуних података. Да бисте били сигурни да су све изабране опције ухваћене, кључно је ажурирати начин на који се подаци обрасца обрађују пре него што их пошаљете на позадину.

Једна од најефикаснијих метода је употреба ФормДата АПИ, у комбинацији са ЈаваСцрипт-овом способношћу да понавља изабране опције. Овај процес осигурава да су све изабране вредности ухваћене и укључене у податке који се шаљу на сервер. У зависности од подешавања, можда ћете морати да рукујете серијализацијом података, као што је коришћење УРЛСеарцхПарамс, да припреми податке обрасца у формату који могу лако да рашчлане позадински системи.

Још један важан аспект који треба узети у обзир је сигурност и перформансе. Иако је руковање подацима обрасца једноставно, валидација уноса и на фронтенд и на позадину је критична да би се избегле рањивости као што су напади ињекцијом. Поред тога, коришћењем модерних АПИ-ја као што су Дохвати АПИ обезбеђује боље перформансе и омогућава флексибилније руковање грешкама, чинећи процес слања података обрасца лакшим и сигурнијим.