如何暂时禁用提交按钮 3 秒钟(提交时),然后重新启用它
How do I temporarily disable a submit button for 3 seconds (onsubmit), then re-enable it?
我对使用javascript相当陌生,这是我到目前为止所拥有的:
<!-- this is to disable the submit button and then re-enable it after 3 sec -->
<script type="text/javascript">
function enable()
{
var x = document.LAYOUTFORM.getElementById("create_button");
setTimeout(x.removeAttribute("disabled"), 3000);
}
</script>
对于按钮,我有这个:
<INPUT TYPE="SUBMIT" VALUE=" Create PDF " class="FORMBUTTON" ID="create_button" onclick="javascript:this.disabled=true;javascript:enable();">
我已经搞砸了几个小时,你们中的大多数人都会看到它并立即知道出了什么问题。 我的表单ID和名称是布局表单。谁能告诉我我在这里做错了什么?
对于奖励积分,我还希望按钮的文本暂时更改为"正在创建...",然后再次返回创建 PDF。
最简单的方法:
<input ... onclick="lockoutSubmit(this)">
在你的JavaScript中:
function lockoutSubmit(button) {
var oldValue = button.value;
button.setAttribute('disabled', true);
button.value = '...processing...';
setTimeout(function(){
button.value = oldValue;
button.removeAttribute('disabled');
}, 3000)
}
将 LAYOUTFORM 放在 document 和 getElementById 之间。
仅供参考,使用Firebug,chrome开发人员工具或任何适用于IE的等效工具,您可以在控制台上使用javascript。 控制台.log还将输出文本甚至对象(在 CDT 中),您可以检查这些对象。 对于探索:)
几个问题。首先,在 onclick 属性中,使用 javascript:用于 URL。onclick 属性中的内容已作为代码进行评估。其次,setTimeout 中的代码应该是字符串或函数名称。你应该做更多类似的事情:
.HTML:
<INPUT TYPE="SUBMIT" VALUE=" Create PDF " class="FORMBUTTON" ID="create_button" onclick="disable();">
JavaScript:
<script type="text/javascript">
function disable() {
x=document.getElementById("createbutton");
x.disabled=true;
x.value="Creating...";
setTimeout(enable, 3000);
}
function enable() {
x.disabled=false;
x.value=" Create PDF ";
}
</script>
您可以通过全局唯一的id
访问该按钮或通过封闭形式特有的name
所以你必须要么
var x = document.getElementById("create_button");
或
var x = document.LAYOUTFORM.elements["create_button_name"];
(假设create_button_name是按钮的名称:
<input type="submit" value=" Create PDF " id="create_button" name="create_button_name" class="formButton" onclick="javascript:this.disabled=true;javascript:enable();">
)
setTimeout 的第一个参数应该是一个函数:
setTimeout(removeAttr, 3000);
function removeAttr() {
x.removeAttribute("disabled")
}
顺便说一句,HTML不需要(也不应该是,为了可读性等)全部大写。
JavaScript有两个主要问题:
.getElementById()
方法属于document
,而不是您的表单(或任何其他)元素。setTimeout()
期望第一个参数是一个函数(或字符串,但几乎从来没有使用字符串合适的情况)。
试试这个:
function enable() {
var x = document.getElementById("create_button");
setTimeout(function() {
x.removeAttribute("disabled");
}, 3000);
}
您可能希望将禁用和重新启用合并到一个功能中:
<INPUT TYPE="SUBMIT" ... onclick="temporaryDisable(this);">
function temporaryDisable(el) {
el.disabled = true;
setTimeout(function() {
el.disabled = false;
}, 3000);
}
请注意,您不需要使用 .removeAttribute()
,您可以直接设置 .disabled
属性(就像您在禁用元素时已经做的那样)。
编辑:刚刚看到了您问题的"奖励积分"部分。您只需要设置 .value
属性:
function temporaryDisable(el) {
var oldLabel = el.value;
el.value = "Creating...";
el.disabled = true;
setTimeout(function() {
el.disabled = false;
el.value = oldLabel;
}, 3000);
}
<script type="text/javascript">
function disDelay(obj){
obj.setAttribute('disabled','disabled');
setTimeout(function(){obj.removeAttribute('disabled')},30000)
}
</script>
<input type="submit" value="Submit" onclick="disDelay(this)">
http://www.webdeveloper.com/forum/showthread.php?164239-Temporarily-Disable-Submit-Button
- 点击相同的按钮打开模型,然后提交表单
- 如何获取所有选中复选框的所有值,然后将其提交到表单中
- Gulp Git首先运行提交任务,然后运行推送任务
- jquery通过ajax验证电子邮件,然后再通过ajax提交表单
- 单击禁用表单按钮,然后提交表单
- 在提交之前验证表单,jQuery发布到javaScript,然后提交到确认页面
- Javascript按钮,它提交联系人表单7表单,然后重定向到URL
- JQuery/JavaScript:遍历表单字段,执行计算,然后提交
- 选择其中一个单选按钮,然后单击“提交”,重定向其他页面
- 在初始表单提交后使用ajax/jQuery自动刷新,然后更改页面标题
- 如何提交表单,然后重定向为提交
- CSS在第一次点击jQuery.post提交时没有应用,然后在随后的点击中没有更新
- 询问用户是否确定,然后禁用按钮并提交表单
- 如何在新窗口中提交表单,然后重定向父页面
- 单击按钮然后弹出一个对话框然后提交按钮
- javascript ajax,表单提交然后页面加载
- 使用ajax发布表单,然后将相同的表单提交到其他url
- Javascript表单提交打开新窗口选项卡,然后重定向父页面
- 提交然后关闭表单
- 您可以暂停表单提交然后重新启动吗?