Є кілька речей, про які потрібно пам’ятати.
1. Існує кілька способів подати форму
- за допомогою кнопки надсилання
- натисканням клавіші Enter
- запустивши подію надсилання в JavaScript
- можливо більше, залежно від пристрою чи майбутнього пристрою.
Таким чином, ми повинні прив’язатись до події надсилання форми , а не до події натискання кнопки. Це забезпечить роботу нашого коду на всіх пристроях та допоміжних технологіях зараз та в майбутньому.
2. Хіджакс
У користувача може бути не ввімкнено JavaScript. Тут хороший шаблон хиджаксу , де ми обережно беремо контроль над формою за допомогою JavaScript, але залишаємо її поданою, якщо JavaScript не працює.
Ми повинні витягнути URL-адресу та метод із форми, тому якщо HTML зміниться, нам не потрібно оновлювати JavaScript.
3. Ненав'язливий JavaScript
Використання event.preventDefault () замість повернення false є хорошою практикою, оскільки це дозволяє події підніматися. Це дозволяє іншим сценаріям приєднуватися до події, наприклад, сценарії аналітики, які можуть контролювати взаємодію користувачів.
Швидкість
Ми в ідеалі повинні використовувати зовнішній скрипт, а не вставляти наш сценарій в рядок. Ми можемо зв’язати це в головному розділі сторінки, використовуючи тег скрипту, або зв’язавшись із ним у нижній частині сторінки для швидкості. Сценарій повинен спокійно покращити користувацький досвід, а не заважати.
Код
Якщо припустити, що ви згодні з усім вищесказаним, і ви хочете зловити подію подання та обробити це за допомогою AJAX (шаблон хиджаксу), ви можете зробити щось подібне:
$(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)
Додайте атрибут автовіддачі даних до тегу форми, і ви можете це зробити:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
JS
$(function() {
$('form[data-autosubmit]').autosubmit();
});