我正在尝试隐藏按钮div和显示一个隐藏的div后,一个表单按钮已经被点击,加上延迟提交/重定向。下面是我想出的办法,但似乎没有100%奏效。
null
$('form').submit(function(e) {
e.preventDefault();
$('#checking').show();
$('.button').hide();
setTimeout(() => {}, 7000);
return true;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" placeholder="Enter Name" name="details" />
<input type="submit" class="button" value="CHECK" />
</form>
<div id="checking" style="display: none;">
CHECKING DETAILS... Please wait
</div>
null
任何建议都非常感谢
假设您想显示消息然后提交,请执行以下操作
null
$('form').on("submit", function(e) {
e.preventDefault();
$('#checking').show();
$('.button').hide();
setTimeout(() => {
// submit the DOM form
document.getElementById("myForm").submit(); // or $("#myForm")[0].submit()
}, 7000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<input type="text" placeholder="Enter Name" name="details" />
<input type="submit" class="button" value="CHECK" />
</form>
<div id="checking" style="display: none;">
CHECKING DETAILS... Please wait
</div>
在计时器回调中,您需要提交表单,但当您这样做时,sumbit
回调将反复运行,调用e.preventDefault()
,因此您可以使用变量作为“标志”来检查是否应该取消该事件。
null
let flag = false;
$('form').on("submit", function(e) {
if(!flag){
e.preventDefault();
$('#checking').show();
$('.button').hide();
flag = true;
}
setTimeout(function(){
$('form').submit();
}, 7000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://www.example.com" method="Post">
<input type="text" placeholder="Enter Name" name="details" />
<input type="submit" class="button" value="CHECK" />
</form>
<div id="checking" style="display: none;">
CHECKING DETAILS... Please wait
</div>