Есть несколько вещей, которые нужно иметь в виду.
1. Есть несколько способов отправить форму
- с помощью кнопки отправки
- нажатием клавиши ввода
- , вызывая событие отправки в JavaScript
- возможно больше в зависимости от устройства или будущего устройства.
Поэтому мы должны связать с событие отправки формы , а не событие нажатия кнопки. Это обеспечит работу нашего кода на всех устройствах и вспомогательных технологиях сейчас и в будущем.
2. Hijax
Возможно, у пользователя не включен JavaScript. Шаблон hijax хорош здесь, где мы бережно контролируем форму с помощью JavaScript, но оставляем ее отправляемой, если JavaScript не работает.
Мы должны извлечь URL-адрес и метод из формы, поэтому, если HTML-код изменяется, нам не нужно обновлять JavaScript.
3. Ненавязчивый JavaScript
Использование event.preventDefault () вместо return false - это хорошая практика, поскольку оно позволяет всплыть событию. Это позволяет другим сценариям связываться с событием, например аналитическим сценариям, которые могут отслеживать взаимодействия с пользователем.
Скорость
В идеале мы должны использовать внешний скрипт, а не вставлять наш скрипт в строку. Мы можем сослаться на это в разделе заголовка страницы, используя тег скрипта, или ссылку на него внизу страницы для скорости. Скрипт должен незаметно улучшать пользовательский интерфейс, а не мешать ему.
Код
Предполагая, что вы согласны со всем вышеперечисленным, и вы хотите перехватить событие отправки и обработать его через 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');
});
Edit:
Недавно мне пришлось это сделать, и в итоге я написал плагин.
(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();
});