Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы или 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>Первый вариант заблокирует кнопку в момент отправки формы.
Чистый 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>JQuery:
<script>
$(document).ready(function(){
$('form').submit(function(){
$(this).find('input[type=submit], button[type=submit]').prop('disabled', true);
});
});
</script>Пример:
Второй вариант заблокирует кнопку по клику.
Чистый JS:
<script>
var btns = document.querySelector('form input[type=submit], form button[type=submit]');
btns.addEventListener('click', function(){
this.disabled = true;
});
</script>JQuery:
<script>
$(document).ready(function(){
$('form input[type=submit], form button[type=submit]').click(function(){
$(this).prop('disabled', true);
});
});
</script>Пример:
Если форма отправляется сама на себя, то стоит добавить защиту от повторной отправки при обновления страницы с помощью 303-го редиректа.
header('Location: https://example.com', true, 303);
exit();
