मेरे पास एक जटिल स्थिति थी, जहां मुझे विभिन्न चीजों को संसाधित करने के लिए कई सबमिट बटन की आवश्यकता थी। उदाहरण के लिए, सहेजें और हटाएं।
आधार यह था कि यह भी विनीत था, इसलिए मैं इसे सामान्य बटन नहीं बना सका। लेकिन यह भी html5 सत्यापन का उपयोग करना चाहता था।
उपयोगकर्ता द्वारा अपेक्षित डिफॉल्ट सबमिशन को ट्रिगर करने के लिए दर्ज किए जाने की स्थिति में सबमिट ईवेंट को ओवरराइड किया गया था; इस उदाहरण में सहेजें।
यहां फॉर्म की प्रोसेसिंग के प्रयास अभी भी जावास्क्रिप्ट के साथ / बिना और HTML5 सत्यापन के साथ काम करते हैं, दोनों सबमिट और क्लिक घटनाओं के साथ।
jsFiddle डेमो - सबमिट के साथ एचटीएमएल 5 सत्यापन और ओवरराइड पर क्लिक करें
एक्सएचटीएमएल
<form>
<input type="text" required="required" value="" placeholder="test" />
<button type="submit" name="save">Save</button>
<button type="submit" name="delete">Delete</button>
</form>
जावास्क्रिप्ट
//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
var isValid = null;
var form = $('form');
var submitButton = form.find('button[type="submit"]')
var saveButton = submitButton.filter('[name="save"]');
var deleteButton = submitButton.filter('[name="delete"]');
//submit form behavior
var submitForm = function(e){
console.log('form submit');
//prevent form from submitting valid or invalid
e.preventDefault();
//user clicked and the form was not valid
if(isValid === false){
isValid = null;
return false;
}
//user pressed enter, process as if they clicked save instead
saveButton.trigger('click');
};
//override submit button behavior
var submitClick = function(e){
//Test form validitiy (HTML5) and store it in a global variable so both functions can use it
isValid = form[0].checkValidity();
if(false === isValid){
//allow the browser's default submit event behavior
return true;
}
//prevent default behavior
e.preventDefault();
//additional processing - $.ajax() etc
//.........
alert('Success');
};
//override submit form event
form.submit(submitForm);
//override submit button click event
submitButton.click(submitClick);
})(jQuery);
जावास्क्रिप्ट का उपयोग करने के लिए चेतावनी यह है कि आपके कोड में प्रत्येक ब्राउज़र का समर्थन किए बिना त्रुटि संदेशों को प्रदर्शित करने के लिए ब्राउज़र की डिफ़ॉल्ट ऑनक्लिक को सबमिट ईवेंट को आवश्यक रूप से प्रस्तुत करना होगा। अन्यथा यदि क्लिक ईवेंट को event.preventDefault () के साथ ओवरराइड किया जाता है या गलत है तो वह कभी भी ब्राउज़र के सबमिट इवेंट में प्रचारित नहीं करेगा।
इंगित करने वाली बात यह है कि कुछ ब्राउज़रों में उपयोगकर्ता सबमिट करने पर फ़ॉर्म सबमिट को ट्रिगर नहीं करेगा, इसके बजाय यह फ़ॉर्म में पहला सबमिट बटन ट्रिगर करेगा। इसलिए यह दिखाने के लिए एक कंसोल.लॉग ('फॉर्म सबमिट') है कि यह ट्रिगर नहीं करता है।