如何在单击提交按钮上添加重置时间？
[英]How to add reset time on click submit button?
问题描述
Hi all below code working fine, and any one tel me how could i add reset delay time like 3 second?
大家好，下面的代码工作正常，有人告诉我如何添加重置延迟时间，比如 3 秒？
i have attached original form that i want impediment this function, what i all need to do is whenever someone hit the submit button, button should change value for "please wait.. " and reset in 3 second value of submit.. that all i want.. and do not refresh page我附上了我想要阻止这个 function 的原始表格，我需要做的是每当有人点击提交按钮时，按钮应该更改“请稍候..”的值并在提交的 3 秒值中重置..所有我想要..并且不刷新页面
<input type="submit" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();"/>
<form class="sTitan-extra" method="post"> <div class="input-group"> <label for="name">Name</label> <input type="text" name="name" id="sTitan-name" placeholder="Name*" /> </div> <div class="input-group"> <label for="phone">Phone Number</label> <input type="tel" name="phone" id="sTitan-phone" placeholder="Phone Number*" /> </div> <div class="input-group"> <label for="email">Email Address</label> <input type="email" name="email" id="sTitan-email" placeholder="Email Address*" /> </div> <div class="input-group"> <label for="street">Street Address</label> <input type="text" name="street" id="sTitan-street" placeholder="Street Address*" /> </div> <div class="minis"> <div class="input-group"> <label for="state">State</label> <input type="text" name="state" id="sTitan-state" placeholder="State*" /> </div> <div class="input-group"> <label for="zip">Zip</label> <input type="text" name="zip" id="sTitan-zip" placeholder="Zip*" /> </div> </div> <div class="input-group"> <label for="message">Description</label> <textarea name="message" id="sTitan-message" cols="30" rows="10" placeholder="Describe your problem"></textarea> </div> <input type="submit" id="but" value="Submit"> <p class="little-text">* Required fields</p> </form> </div> <div class="response"> <div class="icon"> <img src="<?php echo get_template_directory_uri(); ?>/dist/img/hi5.png" alt=""> </div> <div class="the-content"> <p><strong>Thank you <span class="name"></span>,</strong></p> <p>Your request has been submited succesfully. we will send you a confirmation email shortly:</p> </div> <a href="javascript;;" class="close"></a> </div>2 个解决方案
解决方案1
1 已采纳 2020-08-20 11:52:20
- You need button你需要按钮
- inline event handling is not recommended不推荐内联事件处理
- If the form target is somewhere else than the page, you can reset the button text - if not, then no need to reset the text since the page is reloaded如果表单目标不是页面，您可以重置按钮文本 - 如果不是，则无需重置文本，因为页面已重新加载
Code you need in your page页面中需要的代码
You do NOT need jQuery您不需要 jQuery
<!doctype html>
<html>
<head>
<title>test</title>
<script>
window.addEventListener("load", function() {
document.getElementById("but").addEventListener("click", function(e) {
// e.preventDefault(); // if it is NOT a button but a submit
const but = this;
but.disabled = true;
but.style.pointerEvents = "none";
but.value = 'Sending, please wait...';
// but.form.submit(); // move this outside the timeout to submit immediately
setTimeout(function() {
but.disabled = false;
but.value = "Submit";
but.style.pointerEvents = "auto";
}, 3000);
})
})
</script>
</head>
<body>
<form action="https://google.com/search" target="_blank">
<input type="text" name="q" /><input type="button" id="but" value="Submit" />
</form>
</body>
</html>
External Working example外部工作示例
The example below will not actually open a new tab here since _blank is not allowed in a stack snippet.下面的示例实际上不会在此处打开新选项卡，因为堆栈片段中不允许使用 _blank。
document.getElementById("but").addEventListener("click", function(e) { const but = this; but.disabled = true; but.value = 'Sending, please wait...'; but.style.pointerEvents = "none"; setTimeout(function() { document.getElementById("q").select(); but.disabled = false; but.value = "Submit"; but.style.pointerEvents = "auto"; }, 3000); })
<form action="https://google.com/search" target="_blank"> <input type="text" name="q" id="q" /><input type="submit" id="but" value="Submit" /> </form>
解决方案2
0 2020-08-20 11:50:14
If you want to, after 3 seconds, set disabled to false, you could use setTimeout() with a 3000ms delay:如果您想在 3 秒后将 disabled 设置为 false，您可以使用setTimeout()并延迟 3000 毫秒：
<input type="submit" onclick="this.disabled=true;this.value='Sending, please wait...';setTimeout(() => { this.disabled=false; this.value = 'submit' },3000);this.form.submit();"/>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.