Верх страницы
Обложка к записи jQuery сниппеты: блокировка многократного нажатия кнопки отправки формы
Время для прочтения: 0 мин. 0 сек.

jQuery сниппеты: блокировка многократного нажатия кнопки отправки формы

Формы предназначены для обмена данными между пользователем и сервером. Для отправки формы на сервер используется кнопка submit, того же эффекта можно добиться, нажав клавишу enter в пределах текущей формы. Очень часто пользователи, не дождавшись завершения обработки формы, повторно (многократно) нажимают кнопку отправки данных на сервер.

Чтобы избежать дублирования информации на принимающей стороне, проще всего при возникновении события submit на форме блокировать кнопку отправки.

Приведенный сниппет с легкостью решает поставленную задачу.

// Находим все формы в документе
$('form').submit(function( e ){
    // Блокируем кнопки при отправке формы
    $('input[type=submit]', $(this)).prop( 'disabled', true );
	e.preventDefault();
});

Живой пример

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, OpenCart, DLE, Laravel, Moonshine, Symfony, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

19 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
EGORR EGORR
12 лет назад

А если отправляем данные $.ajax(), тогда для этих же целей отключаем асинхрон.
А то на одном моём сайте админы (админши) нафигачили дублей…

Mac
Mac
11 лет назад

Не работает.

Mac
Mac
11 лет назад
Ответить на  Кобзарёв Михаил

Да-да, разумеется, заменял. Не работает все равно.

Кто?
Кто?
11 лет назад

В мозиле и ИЕ не работает(( disabled добавляется, но не орабатывается

Кто?
Кто?
11 лет назад
Ответить на  Кобзарёв Михаил

при нажатии на кнопку атрибут добавляется, но в мозиле и ИЕ не работает…
пишет disabled=disabled, но форма дальше отправляется.

Кто?
Кто?
11 лет назад

отправляется при повторном

Кто?
Кто?
11 лет назад
Ответить на  Кобзарёв Михаил

у меня 9…

Александр Смирнов
Александр Смирнов
9 лет назад

Если форма отправляется POST на другую страницу и потом нужно вернуться НАЗАД к форме, то кнопка так и остаётся заблоченной!

mihdan
9 лет назад
Ответить на  Александр Смирнов

Вернуться назад программно или кнопкой в браузере?

rodigy
rodigy
6 лет назад

В примере допущена ошибка, e.preventDefault() не даст никакого результата т.к. объект события не определен

Предыдущая запись
Следующая запись

Давайте дружить
в Telegram

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы