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

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

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

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

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

Живой пример

0

Источник: https://www.kobzarev.com/jquery/block-repeatedly-pressing-the-submit-button-form/

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: