Блокировка многократной отправки формы

Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы или Enter несколько раз, соответственно обработчик формы тоже сработает многократно. Избежать такой эффект можно с помощью JS или jQuery заблокировав submit-кнопку после первого нажатия.

Пример формы:

<form>
	<div class="form-group">
		<label for="exampleEmail">Email address</label>
		<input type="email" class="form-control" id="exampleEmail" placeholder="Enter email">
	</div>
	<div class="form-group">
		<label for="examplePassword">Password</label>
		<input type="password" class="form-control" id="examplePassword" placeholder="Password">
	</div>
	<div class="form-group form-check">
		<input type="checkbox" class="form-check-input" id="exampleCheck">
		<label class="form-check-label" for="exampleCheck">Check me out</label>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
</form>
HTML

Первый вариант заблокирует кнопку в момент отправки формы, добавив к ней атрибут disabled.

JS:

var forms = document.querySelector('form');
forms.addEventListener('submit', function(){
	var btn = this.querySelector("input[type=submit], button[type=submit]");
	btn.disabled = true;
});
JS

JQuery:

$(document).ready(function(){
	$('form').submit(function(){
		$(this).find('input[type=submit], button[type=submit]').prop('disabled', true);
	});
});
JS

Пример:

Второй вариант заблокирует кнопку при событии onclik.

JS:

var btns = document.querySelector('form input[type=submit], form button[type=submit]');
btns.addEventListener('click', function(){
	this.disabled = true;
});
JS

JQuery:

$(document).ready(function(){
	$('form input[type=submit], form button[type=submit]').click(function(){
		$(this).prop('disabled', true);
	});
});
JS

Пример:

Бывают случаи, когда кнопка отправки формы сделана ссылкой. Атрибут disabled у ссылок не работает, поэтому нужно применить другой метод – добавить к ссылке класс с CSS-свойством pointer-events: none и отключить JS-событие повторного клика.

Форма:

<form id="form">
	<input type="email" class="form-control" placeholder="Enter email">
	<input type="password" placeholder="Password">
	<input type="checkbox">Check me out
	<a href="#" class="btn-submit" onclick="$('#form').submit(); return false;">Submit</a>
</form>
HTML

JQuery:

$(document).ready(function(){
	$('.btn-submit').click(function(){
		$(this).addClass('disabled');
	});
	
	$(document).on('click', '.btn-submit.disabled', function(){
		return false;
	});
});
JS

CSS:

.btn-submit.disabled {
	background: #ababab;
 	color: #fff;   
	pointer-events: none;
}
CSS

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

...обработка формы...

header('Location: https://url_формы', true, 303);
exit();
PHP
30.03.2020, обновлено 13.12.2021
6714
Предыдущая запись Удаление символов в JavaScript

Комментарии 1

, чтобы добавить комментарий.

Другие публикации

Маски ввода для текстовых полей
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...
69457
+2
Стилизация кнопок CSS
Стилизация ссылок и кнопок на примере разных сайтов с поддержкой разными состояний – наведение курсора, нажатие, попадание в фокус и заблокированное состояние элемента.
21877
+1
Location – URL текущей страницы
Объект Location связан с адресной строкой браузера, в его свойствах содержатся все компоненты URL доступные для чтения...
29759
0
PHP класс для отправки E-mail
Отправка писем в кодировке UTF-8 и формате HTML, вложение файлов, дамп писем на сервере в файле eml.
11694
+2
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
167136
+25
JS-скрипт для подтверждения закрытия страницы
Если установить обработчик события beforeunload, который возвращает true, то при попытки пользователем перезагрузить...
8789
+4