আমার বরং জটিল পরিস্থিতি ছিল, যেখানে বিভিন্ন জিনিস প্রক্রিয়া করার জন্য আমার একাধিক জমা বোতামের প্রয়োজন ছিল। উদাহরণস্বরূপ, সংরক্ষণ করুন এবং মুছুন।
ভিত্তিটি ছিল যে এটিও আপত্তিহীন ছিল, তাই আমি কেবল এটি একটি সাধারণ বোতাম তৈরি করতে পারিনি। তবে এইচটিএমএল 5 বৈধতাও ব্যবহার করতে চেয়েছিলেন।
পাশাপাশি ব্যবহারকারী যদি প্রত্যাশিত ডিফল্ট জমাটি ট্রিগার করতে প্রবেশপত্রে চাপ দেওয়া হয় তবে সাবমিশনের ইভেন্টটি ওভাররাইড হয়ে যায়; এই উদাহরণে সংরক্ষণ করুন।
জাভাস্ক্রিপ্টের সাথে / ছাড়াই এবং এইচটিএমএল 5 বৈধতা সহ, জমা দিন এবং ক্লিক করুন ইভেন্ট উভয়ের সাথেই কাজ করার ফর্মটির প্রসেসিংয়ের প্রচেষ্টা এখানে রয়েছে।
jsFiddle ডেমো - জমা দিয়ে ওভাররাইড ক্লিক করে এইচটিএমএল 5 বৈধতা
XHTML
<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);
জাভাস্ক্রিপ্ট ব্যবহার করার সতর্কতাটি হ'ল ব্রাউজারের ডিফল্ট অন্লিক আপনার কোডটিতে প্রতিটি ব্রাউজারকে সমর্থন না করে ত্রুটি বার্তাগুলি প্রদর্শনের জন্য ঘটতে হবে এমন ঘটনাটি জমা দিতে হবে। অন্যথায় যদি ক্লিক ইভেন্টটি ইভেন্ট.প্রিভেন্টডাফল্ট () এর সাথে ওভাররাইড করা হয় বা মিথ্যা প্রত্যাবর্তন হয় তবে এটি কখনই ব্রাউজারের জমা ইভেন্টে প্রচার করে না।
মূল বিষয়টি হ'ল কিছু ব্রাউজারে যখন ব্যবহারকারীরা টিপে প্রবেশ করে তখন ফর্ম জমাটি ট্রিগার করবে না, পরিবর্তে এটি ফর্মের প্রথম জমা বোতামটি ট্রিগার করবে। সুতরাং এটির ট্রিগার হয় না তা দেখানোর জন্য একটি কনসোল.লগ রয়েছে ('ফর্ম জমা দিন')।