Есть несколько вещей, которые вы должны иметь в виду.
1. Есть несколько способов отправить форму
- используя кнопку отправки
- нажав клавишу ввода
- запустив событие отправки в JavaScript
- возможно больше в зависимости от устройства или будущего устройства.
Поэтому мы должны привязать событие отправки формы , а не событие нажатия кнопки. Это обеспечит работу нашего кода на всех устройствах и вспомогательных технологиях сейчас и в будущем.
2. Hijax
Возможно, у пользователя не включен JavaScript. Здесь хорошо использовать шаблон hijax , где мы бережно контролируем форму с помощью JavaScript, но оставляем ее для отправки в случае сбоя JavaScript.
Мы должны извлечь URL и метод из формы, поэтому, если HTML меняется, нам не нужно обновлять JavaScript.
3. Ненавязчивый JavaScript
Использование event.preventDefault () вместо return false - это хорошая практика, поскольку оно позволяет всплыть событию. Это позволяет другим сценариям связываться с событием, например, аналитическим сценариям, которые могут отслеживать взаимодействия с пользователем.
скорость
В идеале мы должны использовать внешний скрипт, а не вставлять наш скрипт в строку. Мы можем сделать ссылку на это в разделе заголовка страницы, используя тег скрипта, или ссылку на него внизу страницы для скорости. Скрипт должен спокойно улучшать пользовательский опыт, а не мешать.
Код
Предполагая, что вы согласны со всем вышеперечисленным, и вы хотите перехватить событие submit и обработать его с помощью AJAX (шаблон hijax), вы можете сделать что-то вроде этого:
$(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...
});
});
});
Вы можете вручную запустить отправку формы в любое время через JavaScript, используя что-то вроде:
$(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)
Добавьте атрибут data-autosubmit к вашему тегу формы, и тогда вы можете сделать это:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
JS
$(function() {
$('form[data-autosubmit]').autosubmit();
});