Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы или 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>Первый вариант заблокирует кнопку в момент отправки формы, добавив к ней атрибут disabled.
JS:
var forms = document.querySelector('form');
forms.addEventListener('submit', function(){
var btn = this.querySelector("input[type=submit], button[type=submit]");
btn.disabled = true;
});JQuery:
$(document).ready(function(){
$('form').submit(function(){
$(this).find('input[type=submit], button[type=submit]').prop('disabled', true);
});
});Пример:
Второй вариант заблокирует кнопку при событии onclik.
JS:
var btns = document.querySelector('form input[type=submit], form button[type=submit]');
btns.addEventListener('click', function(){
this.disabled = true;
});
JQuery:
$(document).ready(function(){
$('form input[type=submit], form button[type=submit]').click(function(){
$(this).prop('disabled', true);
});
});
Пример:
Бывают случаи, когда кнопка отправки формы сделана ссылкой. Атрибут 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>JQuery:
$(document).ready(function(){
$('.btn-submit').click(function(){
$(this).addClass('disabled');
});
$(document).on('click', '.btn-submit.disabled', function(){
return false;
});
});CSS:
.btn-submit.disabled {
background: #ababab;
color: #fff;
pointer-events: none;
}Если форма отправляется сама на себя, то стоит добавить защиту от повторной отправки при обновления страницы с помощью 303-го редиректа.
...обработка формы...
header('Location: https://url_формы', true, 303);
exit();
Akbarali O'tbosarov
