কিভাবে একটি JavaScript ফর্মে একাধিক নির্বাচিত বিকল্প ফেরত দিতে হয়

জাভাস্ক্রিপ্ট ফর্মে একাধিক নির্বাচন পরিচালনা করা

জাভাস্ক্রিপ্টে ফর্মগুলির সাথে কাজ করা একটি সাধারণ কাজ, বিশেষ করে যখন ব্যবহারকারীর ইনপুট পরিচালনা করা যা সার্ভারে জমা দিতে হবে। মোকাবেলা করার সময় একটি সাধারণ চ্যালেঞ্জ দেখা দেয় একাধিক নির্বাচন ফর্মগুলিতে, যেমন একটি "একাধিক নির্বাচন করুন" ড্রপডাউন ব্যবহার করে৷ মৌলিক ফর্ম হ্যান্ডলিং পদ্ধতিগুলি সমস্ত নির্বাচিত বিকল্পগুলি ক্যাপচার করতে পারে না, যার ফলে শুধুমাত্র শেষ নির্বাচিত বিকল্পটি ফেরত দেওয়া হয়।

এই নিবন্ধে, আমরা একটি ব্যবহারিক পদ্ধতির অন্বেষণ করব তা নিশ্চিত করার জন্য যে সমস্ত নির্বাচিত বিকল্পগুলি ক একাধিক-নির্বাচন ড্রপডাউন জাভাস্ক্রিপ্ট ব্যবহার করে ক্যাপচার এবং সঠিকভাবে জমা দেওয়া হয়। আমরা কার্যকরীভাবে একাধিক নির্বাচন পরিচালনা করে এমন একটি কাজের ফর্মকে মানিয়ে নেওয়ার জন্য প্রয়োজনীয় পরিবর্তনগুলির মধ্য দিয়ে চলে যাব। এই পদ্ধতিটি নিশ্চিত করে যে ডেটা প্রক্রিয়াকরণের জন্য একটি পিএইচপি API-তে নির্বিঘ্নে জমা দেওয়া যেতে পারে।

আমাদের প্রাথমিক সমাধান একক নির্বাচনের জন্য ভাল কাজ করে, কিন্তু যখন আমরা একাধিক নির্বাচন ক্ষেত্রে স্থানান্তরিত করি, তখন আমাদের জাভাস্ক্রিপ্ট যুক্তি আপডেট করা গুরুত্বপূর্ণ। যথাযথ সমন্বয় ছাড়া, ফর্মটি শুধুমাত্র বেছে নেওয়া শেষ বিকল্পটি ফেরত দিতে পারে, যা পছন্দসই আচরণ নয়। এটি ঠিক করার জন্য আমরা কীভাবে ফর্ম ডেটা সংগ্রহ এবং প্রক্রিয়া করি তা টুইক করা জড়িত৷

এই গাইডের শেষে, আপনি ঠিক কীভাবে আপনার ফর্ম এবং জাভাস্ক্রিপ্টটি পরিচালনা করতে আপডেট করবেন তা জানতে পারবেন একাধিক নির্বাচিত মান দক্ষতার সাথে আপনি নিশ্চিত করতে সক্ষম হবেন যে সমস্ত নির্বাচিত বিকল্পগুলি ক্যাপচার করা হয়েছে এবং সঠিকভাবে আপনার ব্যাকএন্ডে পাস করা হয়েছে।

জাভাস্ক্রিপ্ট ফর্মগুলিতে একাধিক নির্বাচন কীভাবে পরিচালনা করবেন তা বোঝা

উপরে প্রদত্ত স্ক্রিপ্টগুলি ওয়েব ডেভেলপমেন্টে একটি সাধারণ সমস্যা সমাধানের লক্ষ্য করে: জাভাস্ক্রিপ্ট ব্যবহার করে একটি ফর্ম থেকে একটি সার্ভারে একাধিক নির্বাচিত বিকল্প জমা দেওয়া। মূল সেটআপে, একটি ফর্মে একটি একক নির্বাচন ড্রপডাউন রয়েছে। যাইহোক, যখন একটি সুইচ একাধিক-নির্বাচন ড্রপডাউন, শুধুমাত্র শেষ নির্বাচিত বিকল্প জমা দেওয়া হয়েছে। এটি মোকাবেলা করার জন্য, আমরা একটি HTTP অনুরোধের মাধ্যমে সার্ভারে পাঠানোর আগে সমস্ত নির্বাচিত বিকল্প সংগ্রহ করতে জাভাস্ক্রিপ্ট কোড পরিবর্তন করি।

প্রথম সমাধানে, ফর্মডেটা অবজেক্ট ফর্ম উপাদানগুলি ক্যাপচার করতে ব্যবহৃত হয়, কিন্তু যেহেতু এটি বহু-নির্বাচন ড্রপডাউনগুলিকে অ্যারে হিসাবে বিবেচনা করে, তাই আমাদের অবশ্যই বিকল্পগুলির উপর ম্যানুয়ালি পুনরাবৃত্তি করতে হবে। লুপটি ড্রপডাউনের প্রতিটি বিকল্প পরীক্ষা করে এবং নির্বাচিতটিকে একটি অ্যারেতে ঠেলে দেয়। এই অ্যারে তারপর একটি স্ট্রিং বিন্যাসে যোগদান করা হয় যা সার্ভারে পাঠানো যেতে পারে। এর ব্যবহার XMLHttp অনুরোধ নিশ্চিত করে যে পৃষ্ঠাটি রিফ্রেশ না করেই ডেটা অসিঙ্ক্রোনাসভাবে প্রেরণ করা হয়েছে। এই পদ্ধতিটি ব্যাপকভাবে সমর্থিত, যদিও আরো আধুনিক পদ্ধতি বিদ্যমান।

দ্বিতীয় সমাধানটি দেখায় কিভাবে ব্যবহার করে একই সমস্যাটি পরিচালনা করা যায় এপিআই আনুন. আনয়ন XMLHttpRequest এর চেয়ে একটি ক্লিনার এবং আরও প্রতিশ্রুতি-ভিত্তিক পদ্ধতির অফার করে, যা অ্যাসিঙ্ক্রোনাস ক্রিয়াকলাপগুলি পরিচালনা করা সহজ করে তোলে। প্রথম উদাহরণের মতো, নির্বাচিত বিকল্পগুলি একটি অ্যারেতে একত্রিত হয় এবং একটি স্ট্রিংয়ে রূপান্তরিত হয়। দ আনা পদ্ধতি তারপর এই ডেটা পিএইচপি ব্যাকএন্ডে পাঠায়। নমনীয়তা এবং আরও স্বজ্ঞাত সিনট্যাক্সের কারণে এই পদ্ধতিটি আধুনিক ওয়েব অ্যাপ্লিকেশনগুলিতে আরও দক্ষ এবং ব্যাপকভাবে গৃহীত।

তৃতীয় সমাধানটি jQuery ব্যবহার করে, একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা অনেক DOM ম্যানিপুলেশন এবং Ajax অপারেশনকে সহজ করে। এখানে, নির্বাচিত বিকল্পগুলি ব্যবহার করে ক্যাপচার করা হয়েছে .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");
        }
    });
});

একাধিক নির্বাচনের জন্য জাভাস্ক্রিপ্টের সাথে ফর্ম ডেটা হ্যান্ডলিং অপ্টিমাইজ করা

ফর্মগুলির সাথে কাজ করার সময়, একটি ড্রপডাউনে একাধিক নির্বাচন পরিচালনা করা একটি চ্যালেঞ্জ যা অনেক বিকাশকারীর মুখোমুখি হয়। ডিফল্টরূপে, এইচটিএমএল ফর্মগুলি শুধুমাত্র শেষ নির্বাচিত মানটি a তে ক্যাপচার করে একাধিক-নির্বাচন ড্রপডাউন, যা অসম্পূর্ণ ডেটা জমা দিতে পারে। সমস্ত নির্বাচিত বিকল্পগুলি ক্যাপচার করা হয়েছে তা নিশ্চিত করতে, ব্যাকএন্ডে পাঠানোর আগে ফর্ম ডেটা কীভাবে প্রক্রিয়া করা হয় তা আপডেট করা অত্যন্ত গুরুত্বপূর্ণ৷

সবচেয়ে কার্যকর পদ্ধতি এক ব্যবহার করা হয় ফর্মডেটা API, জাভাস্ক্রিপ্টের নির্বাচিত বিকল্পগুলির উপর পুনরাবৃত্তি করার ক্ষমতার সাথে মিলিত। এই প্রক্রিয়াটি নিশ্চিত করে যে সমস্ত নির্বাচিত মান ক্যাপচার করা হয়েছে এবং সার্ভারে পাঠানো ডেটাতে অন্তর্ভুক্ত করা হয়েছে। সেটআপের উপর নির্ভর করে, আপনাকে ডেটা সিরিয়ালাইজেশন পরিচালনা করতে হতে পারে, যেমন ব্যবহার করা URLSearchParams, একটি বিন্যাসে ফর্ম ডেটা প্রস্তুত করতে যা ব্যাকএন্ড সিস্টেম দ্বারা সহজেই পার্স করা যায়।

বিবেচনা করার আরেকটি গুরুত্বপূর্ণ দিক হল নিরাপত্তা এবং কর্মক্ষমতা। ফর্ম ডেটা পরিচালনা করা সহজবোধ্য হলেও, ইনজেকশন আক্রমণের মতো দুর্বলতা এড়াতে ফ্রন্টএন্ড এবং ব্যাকএন্ড উভয় ক্ষেত্রেই ইনপুট যাচাই করা গুরুত্বপূর্ণ। উপরন্তু, আধুনিক API ব্যবহার করে যেমন এপিআই আনুন আরও ভাল কার্যকারিতা নিশ্চিত করে এবং আরও নমনীয় ত্রুটি পরিচালনার জন্য অনুমতি দেয়, ফর্ম ডেটা জমা দেওয়ার প্রক্রিয়াটিকে মসৃণ এবং আরও নিরাপদ করে।