javascript - 单击表单按钮后,隐藏按钮 div 并显示隐藏的 div
问题描述
我试图隐藏按钮 div 并在单击表单按钮后显示隐藏的 div 并延迟提交/重定向。以下是我想出的,但似乎没有 100% 有效。
$('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>
非常感谢任何建议
解决方案
在您的计时器回调中,您需要提交表单,但是当您提交时,sumbit
回调将一次又一次地运行 call e.preventDefault()
,因此您可以使用变量作为“标志”来检查是否应该取消事件。
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>
推荐阅读
- typescript - VS Code Prettier - Code Formatter Extension 不适用于使用 Typescript 模板的 Create-React-App
- python-3.x - 烧瓶测试 400 错误页面没有通过,但它正在工作
- javascript - 无法从控制器获取数据到 Vue 组件
- go - 这是什么意思?
- sql - 翻转列和行 SQL
- java - Spring Security 拦截除注释外
- reactjs - babel-loader 不工作,意外的令牌 '<'
- r - 一次提示用户两个值,但将它们保存在不同的变量中
- oracle - 错误 ORA-00907: 缺少右括号?
- excel - 在 VBA 中插入多个文件夹中的多个图像