JavaScript-এ ফর্ম সাবমিটের সময় ইনপুট ভ্যালু পরিবর্তন করা

JavaScript-এ ফর্মের `onsubmit` ইভেন্টে ইনপুট ফিল্ডের মান পরিবর্তন করা যায়। `document.formName.fieldName.value` সিনট্যাক্স ব্যবহার করে হিডেন ফিল্ড বা যেকোনো ইনপুট আপডেট করা সম্ভব।

সিনট্যাক্স

document.formName.fieldName.value = "নতুন মান";

পূর্ণ HTML উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Form Submit Value Change</title>
</head>
<body>
    <form name="studentForm" onsubmit="return submitForm()">
        <input type="hidden" name="txtInput" value="10000" />
        <input type="submit" value="Submit Form" />
    </form>

    <script>
        function submitForm() {
            // হিডেন ফিল্ডের মান পরিবর্তন
            document.studentForm.txtInput.value = 'STUDENT-100';
            console.log("নতুন মান: " + document.studentForm.txtInput.value);
            return true; // ফর্ম সাবমিট হবে
        }
    </script>
</body>
</html>

চলানোর পদ্ধতি

1. ফাইলটি formSubmit.html নামে সংরক্ষণ করুন।
2. VS Code-এ Open with Live Server দিয়ে চালান।
3. কনসোল খুলে (F12) "Submit Form" ক্লিক করুন।
4. নেটওয়ার্ক ট্যাবে কোয়েরি স্ট্রিং চেক করুন: `?txtInput=STUDENT-100`

আউটপুট

কনসোল: নতুন মান: STUDENT-100

URL: `.../formSubmit.html?txtInput=STUDENT-100`

আধুনিক পদ্ধতি (Event Listener)

const form = document.forms.studentForm;
form.addEventListener('submit', e => {
    form.txtInput.value = 'STUDENT-100';
    // e.preventDefault(); // সাবমিট বন্ধ করতে
});

FormData API (আধুনিক)

form.addEventListener('submit', e => {
    e.preventDefault();
    const formData = new FormData(form);
    formData.set('txtInput', 'STUDENT-100'); // মান সেট/ওভাররাইড
    
    // AJAX সাবমিশন
    fetch(form.action, { method: 'POST', body: formData });
});

দ্রষ্টব্য

• `name` এট্রিবিউট থাকা ফর্ম/ইনপুট `document.forms.name` দিয়ে অ্যাক্সেসযোগ্য।
• `onsubmit` রিটার্ন `false` করলে সাবমিট বন্ধ হয়।
• হিডেন ফিল্ড ইউজারকে না দেখিয়ে সার্ভারে ডেটা পাঠানোর জন্য।