Отключение форм с JavaScript при отправке для предотвращения двойного отправки
-
26-09-2019 - |
Вопрос
Я хотел бы отключить форму после его представления, чтобы предотвратить двойные представления. Довольно стандартное использование случая я бы подумал, но все примеры я могу выяснить, что есть недостаточно.
Все, что я могу найти, основано на отключении кнопки отправки, но это не мешает повторно представлению формы, если пользователь попадает в клавишу Enter в форме, что является довольно распространенным подходом.
Я думаю о модификации одного из существующих сценариев, чтобы объяснить это, но прежде чем я изобретаю колесо, кто знает скрипт, который уже обрабатывает это правильно, что они могут поделиться? Я действительно удивлен, что пока не будет ничего там.
Решение
Вы можете создать логическую переменную (или объект с логической переменной элементами) и отправлять только форму, когда переменная ложна. Что-то типа:
function init() {
var submit = false;
var f = document.getElementById("FormID");
f.onsubmit = function() {
if(submit) {
return false;
} else {
submit = true;
return true;
}
}
}
Конечно, вам придется позвонить init
После нагрузки страницы, в каком вкусе вы выбираете это (window.onload = ...
, window.addEventListener(...)
, window.attachEvent(...)
, так далее.).
Другие советы
var sent = false;
$('#form').submit(function(e) {
if (!sent) {
sent = true;
// do whatever
}
else e.preventDefault();
});
Я пробовал много решений, но никто из них не работал на меня. Я использовал это, и он работает очень хорошо:
jquery
<script>
$(document).ready(function(){
$('#buttonSubmit').click(function() {
if ($('#frm-confirm').attr('submitted')){
event.preventDefault();
} else {
$('#frm-confirm').attr('submitted',true);
}
});
});
</script>
HTML / PHP.
<form id="frm-confirm" action="" method="post">
<input id="amount" name="amount" value="<?php echo round($_POST['amount'],2); ?>" type="hidden" />
<input id="order_id" name="order_id" value="<?php echo htmlspecialchars($_POST['order_id']);?>" type="hidden" />
<input type="submit" id="buttonSubmit" name="confirm" value="Confirm" />
</form>