Submitting forms programmatically In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में वेब डेवलपर फ़ॉर्म में डिस्प्ले मल्टीप्ल एलिमेंट में submit() फॉर्म मेथड को अप्लाई करके प्रोग्रामिंकल्ली आर्डर में यूजर द्वारा फील डिजिटल इनफार्मेशन को फ़ॉर्म सबमिट बटन से सबमिट कर सकते हैं। वेबसाइट या वेबपेज में फॉर्म डिजिटल फॉर्मेट में इंटरनेट यूजर से इनफार्मेशन और डाटा को कलेक्ट करने का एक बेहतर माध्यम है, फॉर्म में इंटरनेट यूजर द्वारा दी गई जानकारी के रूप में स्टोर या फील करते है. सामान्य फॉर्म में, कांटेक्ट अस फॉर्म, सब्सक्रिप्शन फॉर्म, रजिस्ट्रेशन फॉर्म, स्कूल, यूनिवर्सिटी फॉर्म, ऑनलाइन सेल्स परचेस फॉर्म, आदि सभी फॉर्म को सबमिट बटन मेथड को अप्लाई करके सर्वर साइड बैकेंड में स्टोर किया जाता है।
So, let’s get to know the method of submitting forms in a programmatic order in JavaScript programming.
JavaScript Basic Programmatic Form Submission Process.
जावास्क्रिप्ट वेबपेज फॉर्म में प्रोग्रामेटिक आर्डर में यूजर द्वारा फील फ़ॉर्म डिजिटल इनफार्मेशन को सबमिट करने लिए फ़ॉर्म एलिमेंट में .submit() फंक्शन या मेथड को यूज़ किया जाता है। यह मेथड फ़ॉर्म से जुड़े किसी भी इवेंट लिस्टनेर जैसे, फॉर्म सबमिट इवेंट को बायपास करता है, इस कारण यह डायरेक्ट फ़ॉर्म के सबमिशन प्रोसेस को एक्सेक्यूट करता है।
Basic form submission example in JavaScript.
<form id=”sampleForm”>
<input type=”text” id=”employeename” name=”employeename” required />
<input type=”password” id=”password” name=”password” required />
<button type=”submit”>Submit Form</button>
</form>
<script>
const form = document.getElementById(‘sampleForm’);
// here we use Submit method to the form programmatic after 4 seconds
setTimeout(() => {
form.submit(); // here perform submit form method Programmatically
}, 4000);
</script>
यहाँ फॉर्म सबमिट एक्साम्प्ल में, वेबपेज फ़ॉर्म यूजर इंटरैक्शन के बिना 4 सेकंड के बाद आटोमेटिक सबमिट हो जाएगा।
Executing form submission with form validation in JavaScript.
जावास्क्रिप्ट वेबपेज में प्रोग्रामेटिक आर्डर में फ़ॉर्म सबमिट करते समय, यह ध्यान रखना ज़रूरी है कि submit() फॉर्म मेथड फ़ॉर्म वेलिडेशन ट्रिगर नहीं करता है, जैसे, यह रिक्वायर्ड, मिनिमम लेंथ, या अन्य HTML5 फॉर्म वेलिडेशन ऐट्रिब्यूट्स को टेस्ट नहीं करता है। यदि यूजर चाहे तो फ़ॉर्म सबमिशन से पहले वेलिडेट हो जाए, तो वेब डेवलपर को checkValidity() मेथड को अप्लाई करके मैन्युअल आर्डर में वेलिडेशन प्रोसेस को एक्सेक्यूट करना होगा।
Form submit example with validation in JavaScript.
<form id=”sampleForm”>
<input type=”text” id=”employeename” name=”employeename” required />
<input type=”password” id=”password” name=”password” required />
<button type=”submit”>Submit Form</button>
</form>
<script>
const form = document.getElementById(‘sampleForm’);
// here we use the Submit form method programmatic with form validation
function submitFormWithValidation() used for it {
if (form.checkValidity()) { // here it Check if the form is valid or not
form.submit(); // here it Submit the form if form valid or invalid
} else {
console.log(‘Form data is invalid’);
}
}
// here it Call the function to submit the form after form validation process
here setTimeout(submitFormWithValidation, 4000); // it submit form Programmatic submit after 4 seconds
</script>
यहाँ इस एक्साम्प्ल में, फ़ॉर्म डाटा को सबमिट करने से पहले, checkValidity() फंक्शन यह तय करता है कि सभी आवश्यक फॉर्म डाटा फ़ील्ड प्रॉपर फील की गई हैं। यदि यहाँ फील फ़ॉर्म इनवैलिड है, जैसे, रिक्वायर्ड फॉर्म फ़ील्ड एम्प्टी हैं, तो फ़ॉर्म का डाटा और फॉर्म सबमिट नहीं होता है।
Submitting Form Using AJAX in JavaScript.
जावास्क्रिप्ट में वेबपेज को रीलोड किए बिना अजाक्स स्क्रिप्ट का यूज़ करके फ़ॉर्म डेटा इनफार्मेशन को सबमिट कर सकते हैं, यहाँ प्रोग्रामर फ़ॉर्म डेटा को कलेक्ट कर सकते हैं, और फॉर्म डाटा को fetch() या XMLHttpRequest मेथड को यूज़ करके डाटा को बैकेंड में सर्वर पर सेंड कर सकते हैं।
Submitting Form with AJAX in JavaScript Using fetch().
<form id=”sampleForm”>
<input type=”text” id=”employeename” name=”employeename” required />
<input type=”password” id=”password” name=”password” required />
<button type=”submit”>Submit Form</button>
</form>
<script>
const form = document.getElementById(‘sampleForm’);
form.addEventListener(‘submit’, (event) => {
event.preventDefault(); // here it use to Prevent default form submission process
const formData = new FormData(form); // here it use to Get form field element data
// here we use Send form data via AJAX fetch API method
fetch(‘/submit-form’, {
method: ‘POST’,
body: formData, // here it use to Attach the form element data
})
.then(response => response.json()) // here it use to Handle the server response after form element fill
.then(data => {
console.log(‘Form data submitted successfully’, data);
})
.catch(error => {
console.error(‘Error form submitting’, error);
});
});
</script>
यहाँ इस एक्साम्प्ल में event.preventDefault() फंक्शन मेथड को यूज़ करके फ़ॉर्म को नार्मल आर्डर में सबमिट होने से स्टॉप किया जाता है।
यहाँ फ़ॉर्म डेटा, FormData API मेथड का यूज़ करके फॉर्म डाटा को कलेक्ट किया जाता है, जो की फ़ॉर्म फ़ील्ड से सभी फॉर्म डेटा एलिमेंट को कलेक्ट करता है।
जहा फॉर्म डेटा fetch() मेथड के माध्यम से सर्वर को सेंड किया जाता है, जो की फॉर्म डाटा को एसिंक्रोनस आर्डर में सबमिट करने के लिए अजाक्स स्क्रिप्ट रिक्वेस्ट को एक्सेक्यूट करता है।
AJAX request without form element in JavaScript.
जावास्क्रिप्ट प्रोग्रामर वेबपेज में <form> एलिमेंट को डायरेक्ट यूज़ किए बिना, जबकि प्रोग्रामेटिक आर्डर में फॉर्म डेटा को कलेक्ट करके मैन्युअल आर्डर में डेटा क्रिएट और सबमिट कर सकते हैं.
const data = {
employeename: document.getElementById(’employeename’).value,
password: document.getElementById(‘password’).value,
};
fetch(‘/submit-form’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => console.log(‘Submit Success:’, data))
.catch(error => console.error(‘Submit Error:’, error));
यह इस एक्साम्प्ल में fetch() फंक्शन मेथड को यूज़ करके सर्वर पर फ़ॉर्म डेटा को JSON फॉर्मेट में सेंड करता है।
Stopping form submission based on conditions in JavaScript.
कभी-कभी, आप कंडीशनल आर्डर में फ़ॉर्म सबमिशन को रोकना या अनुमति देना चाह सकते हैं। यहाँ प्रोग्रामेटिक रूप से फ़ॉर्म सबमिट करने से पहले प्रोग्रामर कुछ कंडीशन को टेस्ट कर सकते हैं।
Conditional form submission example in JavaScript.
<form id=”sampleForm”>
<input type=”text” id=”employeename” name=”employeename” required />
<input type=”password” id=”password” name=”password” required />
<button type=”submit”>Submit Form</button>
</form>
<script>
const form = document.getElementById(‘sampleForm’);
const submitButton = form.querySelector(‘button[type=”submit”]’);
// here it Check if form inputs element meet conditions before submit to the
submitButton.addEventListener(‘click’, (event) => {
const employeename = document.getElementById(’employeename’).value;
const password = document.getElementById(‘password’).value;
if (employename.length < 14 || password.length < 8) {
event.preventDefault(); // here it Prevent form submission method
alert(‘enetr employee name must contain 14 characters, and password must contain at least 8 characters’);
} else {
form.submit(); // Submit form programmatically if form data and information valid
}
});
</script>
यहाँ फॉर्म सोर्स कोड सबमिट बटन पर क्लिक इवेंट लिस्टनेर को फॉलो करता है, जहा एम्प्लॉई नाम और पासवर्ड फ़ील्ड में इनपुट वैल्यू को टेस्ट करता है, और यदि दोनों कंडीशन फुलफिल नहीं होती हैं, तो यह फॉर्म सबमिशन प्रोसेस को स्टॉप करता है।
Using submit() method without event listeners in JavaScript.
यहाँ आपको याद रखने योग्य इम्पोर्टेन्ट थिंग्स यह है कि submit() फॉर्म मेथड का यूज़ करने से फ़ॉर्म से जुड़े सबमिट इवेंट लिस्टनेर ट्रिगर नहीं होता हैं। इसका मतलब है कि कस्टम फॉर्म वेलिडेशन या सबमिट इवेंट से जुड़ा कोई अन्य फॉर्म लॉजिक तब तक एक्सेक्यूट नहीं होता है, जब तक प्रोग्रामर इसे मैन्युअल आर्डर में अप्लाई नहीं करते है।
यदि यहाँ यूजर को कस्टम फॉर्म वेलिडेशन मिलता है, या फॉर्म सबमिशन से पहले फॉर्म टेस्ट करने की जरूरत है, तो प्रोग्रामर या तो checkValidity() फंक्शन मेथड का यूज़ करना चाहिए या अपने इवेंट लिस्टनेर में फॉर्म लॉजिक को क्लियर आर्डर में मैनेज करना चाहिए।
Summary of programmatic form submission in JavaScript programming.
- form.submit() method – फॉर्म सबमिट मेथड फ़ॉर्म के सबमिट इवेंट से जुड़े वेलिडेशन या इवेंट लिस्टनेर को ट्रिगर किए बिना प्रोग्रामेटिक आर्डर में फ़ॉर्म डाटा एलिमेंट को सबमिट करता है।
- Validation with checkValidity() method – यह फॉर्म सबमिशन से पहले फ़ॉर्म की वेलिडेशन को तय करने के लिए, प्रोग्रामर checkValidity() फंक्शन मेथड का यूज़ करके फॉर्म को टेस्ट कर सकते हैं कि फ़ॉर्म फ़ील्ड वैलिड हैं या वैलिड नहीं है।
- AJAX form submission – जावास्क्रिप्ट प्रोग्रामर fetch() फंक्शन या XMLHttpRequest मेथड को यूज़ करके फ़ॉर्म को एसिंक्रोनस आर्डर में सबमिट कर सकते हैं, जिससे प्रोग्रामर वेबपेज को रीफ़्रेश किए बिना फ़ॉर्म डेटा को ऑनलाइन सेंड कर सकते हैं।
- Conditional form submission – जावास्क्रिप्ट प्रोग्रामर event.preventDefault() फंक्शन और मेथड के साथ कस्टम लॉजिक को यूज़ करके कुछ कंडीशन के आधार पर फ़ॉर्म सबमिशन मेथड को स्टॉप कर सकते हैं।
- Use of event listener – यहाँ आपके ध्यान रखें योग्य बात यह है कि form.submit() मेथड को कॉल करने से फ़ॉर्म के सबमिट इवेंट में मौजूद किसी भी कस्टम इवेंट लिस्टनेर को बायपास कर देता है।
