जावास्क्रिप्ट फॉर्म में एकाधिक चयनित विकल्प कैसे लौटाएँ

जावास्क्रिप्ट फॉर्म में एकाधिक चयनों को संभालना

जावास्क्रिप्ट में फॉर्म के साथ काम करना एक सामान्य कार्य है, खासकर जब उपयोगकर्ता इनपुट को संभालना होता है जिसे सर्वर पर सबमिट करने की आवश्यकता होती है। निपटने के दौरान एक सामान्य चुनौती उत्पन्न होती है एकाधिक चयन प्रपत्रों में, जैसे "एकाधिक चयन करें" ड्रॉपडाउन का उपयोग करना। मूल प्रपत्र प्रबंधन विधियाँ सभी चयनित विकल्पों को कैप्चर नहीं कर सकती हैं, जिसके परिणामस्वरूप केवल अंतिम चयनित विकल्प ही लौटाया जाएगा।

इस लेख में, हम यह सुनिश्चित करने के लिए एक व्यावहारिक दृष्टिकोण का पता लगाएंगे कि सभी चयनित विकल्प बहु-चयन ड्रॉपडाउन जावास्क्रिप्ट का उपयोग करके कैप्चर किया गया और ठीक से सबमिट किया गया। हम एक कामकाजी फॉर्म को एक ऐसे फॉर्म में ढालने के लिए आवश्यक संशोधनों से गुजरेंगे जो कई चयनों को प्रभावी ढंग से संभाल सके। यह दृष्टिकोण यह भी सुनिश्चित करता है कि डेटा को प्रसंस्करण के लिए PHP एपीआई में निर्बाध रूप से सबमिट किया जा सकता है।

हमारा प्रारंभिक समाधान एकल चयनों के लिए अच्छा काम करता है, लेकिन जब हम एकाधिक चयन फ़ील्ड में स्थानांतरित होते हैं, तो हमारे जावास्क्रिप्ट तर्क को अपडेट करना महत्वपूर्ण है। उचित समायोजन के बिना, फॉर्म केवल चुना गया अंतिम विकल्प लौटा सकता है, जो वांछित व्यवहार नहीं है। इसे ठीक करने में यह बदलाव शामिल है कि हम किस प्रकार डेटा एकत्र करते हैं और संसाधित करते हैं।

इस गाइड के अंत तक, आपको ठीक से पता चल जाएगा कि अपने फॉर्म और जावास्क्रिप्ट को कैसे अपडेट करना है एकाधिक चयनित मान कुशलता से. आप यह सुनिश्चित करने में सक्षम होंगे कि सभी चयनित विकल्प कैप्चर कर लिए गए हैं और सही ढंग से आपके बैकएंड तक पहुंचाए गए हैं।

यह समझना कि जावास्क्रिप्ट फॉर्म में एकाधिक चयनों को कैसे संभालना है

ऊपर दी गई स्क्रिप्ट का उद्देश्य वेब विकास में एक सामान्य समस्या को हल करना है: जावास्क्रिप्ट का उपयोग करके एक फॉर्म से सर्वर पर कई चयनित विकल्प सबमिट करना। मूल सेटअप में, एक फॉर्म में एकल चयन ड्रॉपडाउन होता था। हालाँकि, जब ए पर स्विच किया गया बहु-चयन ड्रॉपडाउन, केवल अंतिम चयनित विकल्प सबमिट किया गया था। इसे संबोधित करने के लिए, हम HTTP अनुरोध के माध्यम से सर्वर पर भेजने से पहले सभी चयनित विकल्पों को एकत्र करने के लिए जावास्क्रिप्ट कोड को संशोधित करते हैं।

पहले समाधान में, फॉर्मडेटा ऑब्जेक्ट का उपयोग प्रपत्र तत्वों को कैप्चर करने के लिए किया जाता है, लेकिन क्योंकि यह बहु-चयन ड्रॉपडाउन को सरणियों के रूप में मानता है, हमें विकल्पों पर मैन्युअल रूप से पुनरावृति करनी होगी। लूप ड्रॉपडाउन में प्रत्येक विकल्प की जांच करता है और चयनित विकल्पों को एक सरणी में धकेलता है। फिर यह सरणी एक स्ट्रिंग प्रारूप में जुड़ जाती है जिसे सर्वर पर भेजा जा सकता है। का उपयोग XMLHttpRequest यह सुनिश्चित करता है कि डेटा पृष्ठ को ताज़ा किए बिना, अतुल्यकालिक रूप से प्रसारित हो। इस पद्धति का व्यापक रूप से समर्थन किया जाता है, हालाँकि अधिक आधुनिक दृष्टिकोण मौजूद हैं।

दूसरा समाधान दर्शाता है कि उसी समस्या का उपयोग करके कैसे निपटा जाए एपीआई लायें. Fetch XMLHttpRequest की तुलना में एक साफ़ और अधिक वादा-आधारित दृष्टिकोण प्रदान करता है, जिससे अतुल्यकालिक संचालन को संभालना आसान हो जाता है। पहले उदाहरण की तरह, चयनित विकल्पों को एक सरणी में इकट्ठा किया जाता है और एक स्ट्रिंग में परिवर्तित किया जाता है। लाना विधि फिर इस डेटा को PHP बैकएंड पर भेजती है। यह दृष्टिकोण अपने लचीलेपन और अधिक सहज सिंटैक्स के कारण आधुनिक वेब अनुप्रयोगों में अधिक कुशल और व्यापक रूप से अपनाया गया है।

तीसरा समाधान jQuery का उपयोग करता है, जो एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है जो कई DOM जोड़तोड़ और Ajax संचालन को सरल बनाती है। यहां, चयनित विकल्पों को का उपयोग करके कैप्चर किया जाता है .वैल() विधि, जो चयनित मानों को सीधे एक सरणी के रूप में लौटाती है। इसके बाद ऐरे को भेजा जाता है $.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");
        }
    });
});

एकाधिक चयनों के लिए जावास्क्रिप्ट के साथ फॉर्म डेटा हैंडलिंग को अनुकूलित करना

प्रपत्रों के साथ काम करते समय, ड्रॉपडाउन में एकाधिक चयनों को संभालना कई डेवलपर्स के सामने एक चुनौती होती है। डिफ़ॉल्ट रूप से, HTML फॉर्म केवल अंतिम चयनित मान को कैप्चर करते हैं बहु-चयन ड्रॉपडाउन, जिसके कारण अधूरा डेटा सबमिट हो सकता है। यह सुनिश्चित करने के लिए कि सभी चयनित विकल्प कैप्चर किए गए हैं, बैकएंड पर भेजने से पहले फॉर्म डेटा को संसाधित करने के तरीके को अपडेट करना महत्वपूर्ण है।

सबसे प्रभावी तरीकों में से एक का उपयोग करना है फॉर्मडेटा एपीआई, चयनित विकल्पों पर पुनरावृति करने की जावास्क्रिप्ट की क्षमता के साथ संयुक्त। यह प्रक्रिया सुनिश्चित करती है कि सभी चयनित मान कैप्चर किए गए हैं और सर्वर पर भेजे गए डेटा में शामिल किए गए हैं। सेटअप के आधार पर, आपको डेटा क्रमांकन को संभालने की भी आवश्यकता हो सकती है, जैसे कि उपयोग करना URLSearchParams, प्रपत्र डेटा को ऐसे प्रारूप में तैयार करना जिसे बैकएंड सिस्टम द्वारा आसानी से पार्स किया जा सके।

विचार करने योग्य एक अन्य महत्वपूर्ण पहलू सुरक्षा और प्रदर्शन है। जबकि फॉर्म डेटा को संभालना सीधा है, इंजेक्शन हमलों जैसी कमजोरियों से बचने के लिए फ्रंटएंड और बैकएंड दोनों पर इनपुट को मान्य करना महत्वपूर्ण है। इसके अतिरिक्त, आधुनिक एपीआई जैसे कि का उपयोग करना एपीआई लायें बेहतर प्रदर्शन सुनिश्चित करता है और अधिक लचीले त्रुटि प्रबंधन की अनुमति देता है, जिससे फॉर्म डेटा सबमिट करने की प्रक्रिया आसान और अधिक सुरक्षित हो जाती है।