ഒരു JavaScript ഫോമിൽ തിരഞ്ഞെടുത്ത ഒന്നിലധികം ഓപ്ഷനുകൾ എങ്ങനെ തിരികെ നൽകാം

JavaScript ഫോമുകളിൽ ഒന്നിലധികം തിരഞ്ഞെടുക്കലുകൾ കൈകാര്യം ചെയ്യുന്നു

JavaScript-ൽ ഫോമുകൾ ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നത് ഒരു സാധാരണ ജോലിയാണ്, പ്രത്യേകിച്ചും ഒരു സെർവറിലേക്ക് സമർപ്പിക്കേണ്ട ഉപയോക്തൃ ഇൻപുട്ട് കൈകാര്യം ചെയ്യുമ്പോൾ. കൈകാര്യം ചെയ്യുമ്പോൾ ഒരു പൊതു വെല്ലുവിളി ഉയർന്നുവരുന്നു ഒന്നിലധികം തിരഞ്ഞെടുപ്പുകൾ ഒരു "മൾപ്പിൾ തിരഞ്ഞെടുക്കുക" ഡ്രോപ്പ്ഡൗൺ ഉപയോഗിക്കുന്നത് പോലെയുള്ള ഫോമുകളിൽ. അടിസ്ഥാന ഫോം കൈകാര്യം ചെയ്യൽ രീതികൾ തിരഞ്ഞെടുത്ത എല്ലാ ഓപ്‌ഷനുകളും ക്യാപ്‌ചർ ചെയ്‌തേക്കില്ല, ഇത് അവസാനമായി തിരഞ്ഞെടുത്ത ഓപ്‌ഷൻ മാത്രം തിരികെ നൽകുന്നതിലേക്ക് നയിക്കുന്നു.

ഈ ലേഖനത്തിൽ, തിരഞ്ഞെടുത്ത എല്ലാ ഓപ്ഷനുകളും a-ൽ ഉണ്ടെന്ന് ഉറപ്പാക്കുന്നതിനുള്ള ഒരു പ്രായോഗിക സമീപനം ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും ഒന്നിലധികം തിരഞ്ഞെടുത്ത ഡ്രോപ്പ്ഡൗൺ JavaScript ഉപയോഗിച്ച് ക്യാപ്‌ചർ ചെയ്യുകയും ശരിയായി സമർപ്പിക്കുകയും ചെയ്യുന്നു. ഒന്നിലധികം തിരഞ്ഞെടുപ്പുകൾ ഫലപ്രദമായി കൈകാര്യം ചെയ്യുന്ന ഒന്നിലേക്ക് വർക്കിംഗ് ഫോം പൊരുത്തപ്പെടുത്തുന്നതിന് ആവശ്യമായ പരിഷ്‌ക്കരണങ്ങളിലൂടെ ഞങ്ങൾ നടക്കും. പ്രോസസ്സിംഗിനായി ഒരു PHP API-ലേക്ക് ഡാറ്റ പരിധിയില്ലാതെ സമർപ്പിക്കാൻ കഴിയുമെന്നും ഈ സമീപനം ഉറപ്പാക്കുന്നു.

ഞങ്ങളുടെ പ്രാരംഭ പരിഹാരം ഒറ്റ തിരഞ്ഞെടുക്കലുകൾക്ക് നന്നായി പ്രവർത്തിക്കുന്നു, എന്നാൽ ഞങ്ങൾ ഒന്നിലധികം തിരഞ്ഞെടുക്കൽ ഫീൽഡിലേക്ക് മാറുമ്പോൾ, ഞങ്ങളുടെ JavaScript ലോജിക്ക് അപ്ഡേറ്റ് ചെയ്യേണ്ടത് പ്രധാനമാണ്. ശരിയായ ക്രമീകരണങ്ങളില്ലാതെ, ഫോം തിരഞ്ഞെടുത്ത അവസാന ഓപ്ഷൻ മാത്രമേ നൽകൂ, അത് ആവശ്യമുള്ള സ്വഭാവമല്ല. ഇത് പരിഹരിക്കുന്നതിൽ, ഞങ്ങൾ എങ്ങനെ ഫോം ഡാറ്റ ശേഖരിക്കുകയും പ്രോസസ്സ് ചെയ്യുകയും ചെയ്യുന്നു എന്നത് ട്വീക്ക് ചെയ്യുന്നത് ഉൾപ്പെടുന്നു.

ഈ ഗൈഡിൻ്റെ അവസാനത്തോടെ, നിങ്ങളുടെ ഫോമും ജാവാസ്ക്രിപ്റ്റും എങ്ങനെ അപ്‌ഡേറ്റ് ചെയ്യണമെന്ന് കൃത്യമായി നിങ്ങൾക്ക് അറിയാം തിരഞ്ഞെടുത്ത ഒന്നിലധികം മൂല്യങ്ങൾ കാര്യക്ഷമമായി. തിരഞ്ഞെടുത്ത എല്ലാ ഓപ്‌ഷനുകളും ക്യാപ്‌ചർ ചെയ്‌ത് നിങ്ങളുടെ ബാക്കെൻഡിലേക്ക് ശരിയായി കൈമാറുന്നുവെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾക്ക് കഴിയും.

JavaScript ഫോമുകളിൽ ഒന്നിലധികം തിരഞ്ഞെടുക്കലുകൾ എങ്ങനെ കൈകാര്യം ചെയ്യാമെന്ന് മനസ്സിലാക്കുന്നു

മുകളിൽ നൽകിയിരിക്കുന്ന സ്ക്രിപ്റ്റുകൾ വെബ് ഡെവലപ്‌മെൻ്റിലെ പൊതുവായ ഒരു പ്രശ്നം പരിഹരിക്കാൻ ലക്ഷ്യമിടുന്നു: JavaScript ഉപയോഗിച്ച് ഒരു സെർവറിലേക്ക് ഒരു ഫോമിൽ നിന്ന് തിരഞ്ഞെടുത്ത ഒന്നിലധികം ഓപ്ഷനുകൾ സമർപ്പിക്കുന്നു. യഥാർത്ഥ സജ്ജീകരണത്തിൽ, ഒരു ഫോമിൽ ഒരൊറ്റ തിരഞ്ഞെടുക്കൽ ഡ്രോപ്പ്ഡൗൺ അടങ്ങിയിരിക്കുന്നു. എന്നിരുന്നാലും, എയിലേക്ക് മാറിയപ്പോൾ ഒന്നിലധികം-തിരഞ്ഞെടുക്കൽ ഡ്രോപ്പ്ഡൗൺ, അവസാനം തിരഞ്ഞെടുത്ത ഓപ്ഷൻ മാത്രമാണ് സമർപ്പിച്ചത്. ഇത് പരിഹരിക്കുന്നതിന്, ഒരു HTTP അഭ്യർത്ഥന വഴി സെർവറിലേക്ക് അയയ്‌ക്കുന്നതിന് മുമ്പ് തിരഞ്ഞെടുത്ത എല്ലാ ഓപ്ഷനുകളും ശേഖരിക്കുന്നതിന് ഞങ്ങൾ JavaScript കോഡ് പരിഷ്‌ക്കരിക്കുന്നു.

ആദ്യ പരിഹാരത്തിൽ, ദി ഫോംഡാറ്റ ഫോം ഘടകങ്ങൾ ക്യാപ്‌ചർ ചെയ്യാൻ ഒബ്‌ജക്റ്റ് ഉപയോഗിക്കുന്നു, പക്ഷേ ഇത് മൾട്ടി-സെലക്ട് ഡ്രോപ്പ്‌ഡൗണുകളെ അറേകളായി പരിഗണിക്കുന്നതിനാൽ, ഞങ്ങൾ ഓപ്ഷനുകൾ സ്വമേധയാ ആവർത്തിക്കണം. ഡ്രോപ്പ്ഡൗണിലെ ഓരോ ഓപ്ഷനും ലൂപ്പ് പരിശോധിക്കുകയും തിരഞ്ഞെടുത്തവയെ ഒരു അറേയിലേക്ക് തള്ളുകയും ചെയ്യുന്നു. ഈ അറേ പിന്നീട് സെർവറിലേക്ക് അയയ്ക്കാൻ കഴിയുന്ന ഒരു സ്ട്രിംഗ് ഫോർമാറ്റിലേക്ക് ചേരുന്നു. ഉപയോഗം XMLHttpRequest പേജ് പുതുക്കാതെ തന്നെ ഡാറ്റ അസമന്വിതമായി കൈമാറ്റം ചെയ്യപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. കൂടുതൽ ആധുനിക സമീപനങ്ങൾ നിലവിലുണ്ടെങ്കിലും ഈ രീതി പരക്കെ പിന്തുണയ്ക്കുന്നു.

രണ്ടാമത്തെ പരിഹാരം, അതേ പ്രശ്നം എങ്ങനെ കൈകാര്യം ചെയ്യാമെന്ന് കാണിക്കുന്നു API ലഭ്യമാക്കുക. XMLHttpRequest എന്നതിനേക്കാൾ വൃത്തിയുള്ളതും കൂടുതൽ വാഗ്ദാനങ്ങൾ അടിസ്ഥാനമാക്കിയുള്ളതുമായ സമീപനമാണ് Fetch വാഗ്ദാനം ചെയ്യുന്നത്, ഇത് അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുന്നത് എളുപ്പമാക്കുന്നു. ആദ്യ ഉദാഹരണത്തിലെന്നപോലെ, തിരഞ്ഞെടുത്ത ഓപ്ഷനുകൾ ഒരു അറേയിലേക്ക് ശേഖരിക്കുകയും ഒരു സ്ട്രിംഗായി പരിവർത്തനം ചെയ്യുകയും ചെയ്യുന്നു. ദി കൊണ്ടുവരിക രീതി പിന്നീട് ഈ ഡാറ്റ PHP ബാക്കെൻഡിലേക്ക് അയയ്ക്കുന്നു. ഈ സമീപനം അതിൻ്റെ വഴക്കവും കൂടുതൽ അവബോധജന്യമായ വാക്യഘടനയും കാരണം ആധുനിക വെബ് ആപ്ലിക്കേഷനുകളിൽ കൂടുതൽ കാര്യക്ഷമവും വ്യാപകമായി സ്വീകരിച്ചതുമാണ്.

മൂന്നാമത്തെ പരിഹാരം jQuery ഉപയോഗിക്കുന്നു, ഇത് നിരവധി DOM കൃത്രിമത്വങ്ങളും അജാക്സ് പ്രവർത്തനങ്ങളും ലളിതമാക്കുന്ന ഒരു ജനപ്രിയ ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയാണ്. ഇവിടെ, തിരഞ്ഞെടുത്ത ഓപ്ഷനുകൾ ഉപയോഗിച്ച് ക്യാപ്‌ചർ ചെയ്യുന്നു .val() ഒരു അറേയുടെ രൂപത്തിൽ തിരഞ്ഞെടുത്ത മൂല്യങ്ങൾ നേരിട്ട് നൽകുന്ന രീതി. തുടർന്ന് അറേ വഴി അയയ്ക്കുന്നു $.ajax(), jQuery-യിൽ HTTP അഭ്യർത്ഥനകൾ നടത്തുന്നതിനുള്ള ഒരു ലളിതമായ മാർഗ്ഗം. ഈ സമീപനത്തിന് മുമ്പത്തെ ഉദാഹരണങ്ങളേക്കാൾ കുറച്ച് മാനുവൽ കോഡ് ആവശ്യമാണ്, നിങ്ങളുടെ പ്രോജക്റ്റിൽ jQuery ഉൾപ്പെടുത്തിയിരിക്കുമ്പോൾ ഇത് ഒരു ദ്രുത പരിഹാരമായി മാറുന്നു.

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

ഒന്നിലധികം തിരഞ്ഞെടുക്കലുകൾക്കായി JavaScript ഉപയോഗിച്ച് ഫോം ഡാറ്റ കൈകാര്യം ചെയ്യൽ ഒപ്റ്റിമൈസ് ചെയ്യുന്നു

ഫോമുകൾക്കൊപ്പം പ്രവർത്തിക്കുമ്പോൾ, ഒരു ഡ്രോപ്പ്ഡൗണിൽ ഒന്നിലധികം തിരഞ്ഞെടുക്കലുകൾ കൈകാര്യം ചെയ്യുന്നത് പല ഡെവലപ്പർമാരും നേരിടുന്ന ഒരു വെല്ലുവിളിയാണ്. സ്ഥിരസ്ഥിതിയായി, HTML ഫോമുകൾ a-യിൽ അവസാനം തിരഞ്ഞെടുത്ത മൂല്യം മാത്രമേ പിടിച്ചെടുക്കൂ ഒന്നിലധികം-തിരഞ്ഞെടുക്കൽ ഡ്രോപ്പ്ഡൗൺ, ഇത് അപൂർണ്ണമായ ഡാറ്റ സമർപ്പിക്കുന്നതിലേക്ക് നയിച്ചേക്കാം. തിരഞ്ഞെടുത്ത എല്ലാ ഓപ്‌ഷനുകളും ക്യാപ്‌ചർ ചെയ്‌തെന്ന് ഉറപ്പാക്കാൻ, ഫോം ഡാറ്റ ബാക്കെൻഡിലേക്ക് അയയ്‌ക്കുന്നതിന് മുമ്പ് പ്രോസസ്സ് ചെയ്യുന്ന രീതി അപ്‌ഡേറ്റ് ചെയ്യേണ്ടത് നിർണായകമാണ്.

ഏറ്റവും ഫലപ്രദമായ രീതികളിൽ ഒന്ന് ഉപയോഗിക്കുന്നത് ഫോംഡാറ്റ API, തിരഞ്ഞെടുത്ത ഓപ്‌ഷനുകളിലൂടെ ആവർത്തിക്കാനുള്ള JavaScript-ൻ്റെ കഴിവുമായി സംയോജിപ്പിച്ചിരിക്കുന്നു. തിരഞ്ഞെടുത്ത എല്ലാ മൂല്യങ്ങളും ക്യാപ്‌ചർ ചെയ്‌ത് സെർവറിലേക്ക് അയച്ച ഡാറ്റയിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ടെന്ന് ഈ പ്രക്രിയ ഉറപ്പാക്കുന്നു. സജ്ജീകരണത്തെ ആശ്രയിച്ച്, ഉപയോഗിക്കുന്നത് പോലെയുള്ള ഡാറ്റ സീരിയലൈസേഷനും നിങ്ങൾ കൈകാര്യം ചെയ്യേണ്ടതുണ്ട് URLSearchParams, ബാക്കെൻഡ് സിസ്റ്റങ്ങൾക്ക് എളുപ്പത്തിൽ പാഴ്‌സ് ചെയ്യാൻ കഴിയുന്ന ഫോർമാറ്റിൽ ഫോം ഡാറ്റ തയ്യാറാക്കാൻ.

പരിഗണിക്കേണ്ട മറ്റൊരു പ്രധാന വശം സുരക്ഷയും പ്രകടനവുമാണ്. ഫോം ഡാറ്റ കൈകാര്യം ചെയ്യുന്നത് ലളിതമാണെങ്കിലും, ഇൻജക്ഷൻ ആക്രമണങ്ങൾ പോലുള്ള കേടുപാടുകൾ ഒഴിവാക്കാൻ ഫ്രണ്ട്എൻഡിലും ബാക്കെൻഡിലും ഇൻപുട്ട് സാധൂകരിക്കുന്നത് നിർണായകമാണ്. കൂടാതെ, പോലുള്ള ആധുനിക API-കൾ ഉപയോഗിക്കുന്നു API ലഭ്യമാക്കുക മികച്ച പ്രകടനം ഉറപ്പാക്കുകയും കൂടുതൽ വഴക്കമുള്ള പിശക് കൈകാര്യം ചെയ്യാൻ അനുവദിക്കുകയും ചെയ്യുന്നു, ഇത് ഫോം ഡാറ്റ സമർപ്പിക്കുന്ന പ്രക്രിയ സുഗമവും സുരക്ഷിതവുമാക്കുന്നു.