[英]Prevent multiple executions of JS function / form submission
我正在使用具有单个输入的表单,如下所示:
<form action="" method="POST" id="myForm" name="myForm">
<input type="text" name="myInput" id="myInput" maxlength="9" OnKeyPress="checkMyForm();" onKeyUp="checkMyForm();" onChange="checkMyForm();" />
<button id="btnSubmit" class="btnSubmit" >Submit</button>
</form>
JS函数检查输入,如果满意,则等待1.25秒,然后提交表单,如下所示:
function checkMyForm () {
var input = document.getElementById("myInput");
var form = document.getElementById("myForm");
if ( /* check the input here */) {
setTimeout(function() {
// submit the form
$("#myForm").submit(); }, 1250);
}
else {
// do nothing
}
}
if
语句检查输入内容的长度。 如果我输入(7个字符),它将执行6-7次。 如果我将其粘贴-执行两次。 我有办法阻止多表单提交吗?
我已经准备好了:
$(document).ready(function() {
$("#myForm").submit(function(event) {
// disable the submit/print button
document.getElementById('btnSubmit').disabled = true;
// prevent resubmission of the form
$(this).submit(function() {
return false;
});
// prevent page refresh
event.preventDefault();
// contineu with my stuff to submit the form
$.ajax({
url: 'index.php',
type: 'post',
data: {
"myInput" : $('#myInput').val(),
},
success: function(response) {
if(!alert(response)) {
// do my thing here
}
}
});
}
}
这样会阻止实际运行PHP边代码提交表单; 但无论如何都会触发alert
(如果粘贴两次,则键入5-7次)。 如何防止多次提交和回复退货?
我假设您的checkMyForm()函数实际上是您的check_promisLot()函数,您应该更改它。
您是否尝试过clearTimeout,它会发生以下情况;
var delayExec;
function check_promisLot () {
clearTimeout(delayExec);
var input = document.getElementById("myInput");
var form = document.getElementById("myForm");
if ( /* check the input here */) {
delayExec = setTimeout(function() {
// submit the form
$("#myForm").submit(); }, 1250);
}
else {
// do nothing
}
}
本质上,每次发生更新触发事件时,尝试重置计时器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.