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

Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы или 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

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

Чистый JS:

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

JQuery:

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

Пример:

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

Чистый JS:

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

JQuery:

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

Пример:

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

header('Location: https://example.com', true, 303);
exit();
PHP
30.03.2020

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

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

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

Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...
37463
0
Объект Location связан с адресной строкой браузера, в его свойствах содержатся все компоненты URL доступные для чтения...
14553
+1
Отправка писем в кодировке UTF-8 и формате HTML, вложение файлов, дамп писем на сервере в файле eml.
6942
+2
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
7872
+10
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
44305
+9
Если установить обработчик события beforeunload, который возвращает true, то при попытки пользователем перезагрузить...
3075
+3