कुछ बातों को ध्यान में रखना आवश्यक है।
1. फॉर्म जमा करने के कई तरीके हैं
- सबमिट बटन का उपयोग कर
- एंटर दबाकर
- जावास्क्रिप्ट में सबमिट ईवेंट ट्रिगर करके
- संभवतः डिवाइस या भविष्य के डिवाइस के आधार पर अधिक।
इसलिए हमें फॉर्म सबमिट इवेंट में बाँधना चाहिए , न कि बटन क्लिक इवेंट। यह अब और भविष्य में सभी उपकरणों और सहायक तकनीकों पर हमारे कोड को सुनिश्चित करेगा।
2. हिजक्स
उपयोगकर्ता के पास जावास्क्रिप्ट सक्षम नहीं हो सकता है। यहां एक हिजाक्स पैटर्न अच्छा है, जहां हम धीरे-धीरे जावास्क्रिप्ट का उपयोग करके फॉर्म को नियंत्रित करते हैं, लेकिन जावास्क्रिप्ट के विफल होने पर इसे छोड़ दें।
हमें URL और विधि को फ़ॉर्म से खींचना चाहिए, इसलिए यदि HTML बदलता है, तो हमें जावास्क्रिप्ट को अपडेट करने की आवश्यकता नहीं है।
3. विनीत जावास्क्रिप्ट
Event.preventDefault () का उपयोग करने के बजाय रिटर्न गलत है अच्छा अभ्यास है क्योंकि यह घटना को बुलबुला करने की अनुमति देता है। यह अन्य लिपियों को घटना में बाँधने की सुविधा देता है, उदाहरण के लिए एनालिटिक्स लिपियाँ जो उपयोगकर्ता के इंटरैक्शन की निगरानी कर सकती हैं।
गति
हमें अपनी स्क्रिप्ट इनलाइन सम्मिलित करने के बजाय आदर्श रूप से एक बाहरी स्क्रिप्ट का उपयोग करना चाहिए। हम इसे स्क्रिप्ट टैग का उपयोग करके पृष्ठ के मुख्य भाग में लिंक कर सकते हैं, या गति के लिए पृष्ठ के नीचे लिंक कर सकते हैं। स्क्रिप्ट को चुपचाप उपयोगकर्ता अनुभव को बढ़ाना चाहिए, रास्ते में नहीं आना चाहिए।
कोड
मान लें कि आप उपरोक्त सभी से सहमत हैं, और आप सबमिट ईवेंट को पकड़ना चाहते हैं, और इसे AJAX (एक हाईजैक पैटर्न) के माध्यम से संभालना चाहते हैं, तो आप ऐसा कुछ कर सकते हैं:
$(function() {
$('form.my_form').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
});
जब भी आप जावास्क्रिप्ट का उपयोग करके किसी चीज़ की तरह उपयोग कर सकते हैं, तब आप मैन्युअल रूप से ट्रिगर कर सकते हैं:
$(function() {
$('form.my_form').trigger('submit');
});
संपादित करें:
मुझे हाल ही में ऐसा करना पड़ा और एक प्लगइन लिखना समाप्त कर दिया।
(function($) {
$.fn.autosubmit = function() {
this.submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
return this;
}
})(jQuery)
अपने फ़ॉर्म टैग में डेटा-ऑटोसुबमिट विशेषता जोड़ें और आप ऐसा कर सकते हैं:
एचटीएमएल
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
जे एस
$(function() {
$('form[data-autosubmit]').autosubmit();
});