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

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

Комментарии

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

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

Маски ввода для текстовых полей
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...
20.01.2017
31210
0
Location – URL текущей страницы
Объект Location связан с адресной строкой браузера, в его свойствах содержатся все компоненты URL доступные для чтения...
25.10.2018
12488
+1
PHP класс для отправки E-mail
Отправка писем в кодировке UTF-8 и формате HTML, вложение файлов, дамп писем на сервере в файле eml.
21.12.2016
5933
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
5706
+8
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
23.12.2016
33752
+8
JS-скрипт для подтверждения закрытия страницы
Если установить обработчик события beforeunload, который возвращает true, то при попытки пользователем перезагрузить...
01.10.2019
2121
+2