У мене була досить складна ситуація, коли мені потрібно було декілька кнопок подання для обробки різних речей. Наприклад, Зберегти та видалити.
Основою було те, що це також було ненав’язливо, тому я не міг просто зробити його звичайною кнопкою. Але також хотів використати перевірку html5.
Також подія подання була відмінена у випадку, якщо користувач натиснув клавішу Enter, щоб викликати очікуване подання за замовчуванням; у цьому прикладі зберегти.
Ось зусилля по обробці форми, щоб все ще працювати з / без javascript і з перевірки html5, з подіями подання та натискання.
Демонстрація jsFiddle - перевірка HTML5 з перевірками надсилання та натискання
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>
JavaScript
//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);
Застереження щодо використання Javascript полягає в тому, що onclick браузера за замовчуванням повинен поширюватися на подію подання, ОБОВ'ЯЗКОВО відбуватись для відображення повідомлень про помилки, не підтримуючи кожен браузер у вашому коді. В іншому випадку, якщо подія натискання буде замінена на event.preventDefault () або повернеться помилковою, вона ніколи не поширюватиметься на подію подання браузера.
Варто зазначити, що в деяких браузерах не буде спровоковано подання форми, коли користувач натискає кнопку, замість цього вона запустить першу кнопку подання у формі. Отже, існує console.log ("форма надсилання"), щоб показати, що він не спрацьовує.