javascript 如何暂时禁用提交按钮 3 秒（onsubmit），然后重新启用它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10593062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I temporarily disable a submit button for 3 seconds (onsubmit), then re-enable it?
提问by AmazingChase
I am fairly new to using javascript and here is what I have so far:
我对使用 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>
And for the button I have this:
对于按钮，我有这个：
<INPUT TYPE="SUBMIT" VALUE=" Create PDF " class="FORMBUTTON" ID="create_button" onclick="javascript:this.disabled=true;javascript:enable();">
I have messed with this for hours and most of you will look at it and know what is wrong immediately. My form ID and name is LAYOUTFORM. Can anyone tell me what I am doing wrong here?
我已经搞砸了几个小时，你们中的大多数人都会看到它并立即知道出了什么问题。我的表单 ID 和名称是 LAYOUTFORM。谁能告诉我我在这里做错了什么？
For bonus points I would also like the text of the button to temporarily change to "Creating..." while it is disabled, and then back to Create PDF again.
对于奖励积分，我还希望按钮的文本在禁用时暂时更改为“正在创建...”，然后再次返回到创建 PDF。
回答by ninjagecko
Simplest way:
最简单的方法：
<input ... onclick="lockoutSubmit(this)">
In your javascript:
在你的 javascript 中：
function lockoutSubmit(button) {
var oldValue = button.value;
button.setAttribute('disabled', true);
button.value = '...processing...';
setTimeout(function(){
button.value = oldValue;
button.removeAttribute('disabled');
}, 3000)
}
回答by Nivas
You can access the button either by idthat is globally unique
or by the nameunique to the enclosing form
您可以通过id全局唯一或name封闭表单的唯一访问按钮
So you have to either
所以你必须要么
var x = document.getElementById("create_button");
or
或者
var x = document.LAYOUTFORM.elements["create_button_name"];
(Assuming create_button_name is the name of the button:
（假设 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();">
)
)
The first parameter of the setTimeout should be a function:
setTimeout 的第一个参数应该是一个函数：
setTimeout(removeAttr, 3000);
function removeAttr() {
x.removeAttribute("disabled")
}
BTW, HTML need not be (and should not be, for readability etc) all uppercase.
顺便说一句，HTML 不需要（也不应该，为了可读性等）全部大写。
回答by MushinNoShin
Drop the LAYOUTFORM between document and getElementById.
删除文档和 getElementById 之间的 LAYOUTFORM。
Just an fyi, using firebug, chrome developer tools, or whatever the equivalent tools are for IE, you can monkey with your javascript on the console. Console.log will also output text and even objects (in CDT) which you can inspect. Very useful for exploring :)
仅供参考，使用 firebug、chrome 开发人员工具或任何适用于 IE 的等效工具，您可以在控制台上使用 javascript。Console.log 还将输出您可以检查的文本甚至对象（在 CDT 中）。对探索非常有用:)
回答by D. Strout
Several problems. First, in the onclick attribute, you use javascript: which is for URLs. Stuff inside the onclick attribute is already evaluated as code. Second, the code in your setTimeout should either be string or a function name. You should do something more like this:
几个问题。首先，在 onclick 属性中，您使用 javascript: 用于 URL。onclick 属性中的内容已经被评估为代码。其次， setTimeout 中的代码应该是字符串或函数名称。你应该做更多这样的事情：
HTML:
HTML：
<INPUT TYPE="SUBMIT" VALUE=" Create PDF " class="FORMBUTTON" ID="create_button" onclick="disable();">
JavaScript:
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>
回答by nnnnnn
There are two main problems with your JavaScript:
你的 JavaScript 有两个主要问题：
The
.getElementById()method belongs todocument, not to your form (or any other) element.setTimeout()expects the first parameter to be a function (or a string, but there's almost never a situation when using a string is appropriate).
该
.getElementById()方法属于document，而不属于您的表单（或任何其他）元素。setTimeout()期望第一个参数是一个函数（或一个字符串，但几乎从来没有使用字符串是合适的情况）。
Try this:
试试这个：
function enable() {
var x = document.getElementById("create_button");
setTimeout(function() {
x.removeAttribute("disabled");
}, 3000);
}
You may like to combine the disabling and re-enabling into a single function:
您可能希望将禁用和重新启用合并为一个函数：
<INPUT TYPE="SUBMIT" ... onclick="temporaryDisable(this);">
function temporaryDisable(el) {
el.disabled = true;
setTimeout(function() {
el.disabled = false;
}, 3000);
}
Note that you don't need to use .removeAttribute(), you can just set the .disabledproperty directly (like you were already doing when you disabled the element).
请注意，您不需要使用.removeAttribute()，您可以直接设置.disabled属性（就像您禁用元素时已经在做的那样）。
EDIT: Just saw the "bonus points" part of your question. You just need to set the .valueproperty:
编辑：刚刚看到您问题的“积分”部分。您只需要设置.value属性：
function temporaryDisable(el) {
var oldLabel = el.value;
el.value = "Creating...";
el.disabled = true;
setTimeout(function() {
el.disabled = false;
el.value = oldLabel;
}, 3000);
}
回答by Pablo Pazos
<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
http://www.webdeveloper.com/forum/showthread.php?164239-Temporously-Disable-Submit-Button
