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

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

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

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

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

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

Живой пример

0

ВКонтакте
Одноклассники
Linkedin
Telegram
WhatsApp

Комментарии
Подписаться
Уведомить о
guest
19 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
EGORR EGORR
9 лет назад

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

Mac
Mac
8 лет назад

Не работает.

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

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

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

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

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

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

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

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

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

у меня 9…

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

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

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

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

rodigy
rodigy
3 лет назад

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