如何暂时禁用提交按钮3秒(onsubmit),然后重新启用它?

时间:2012-05-15 01:24:32

标签: javascript form-submit

我是使用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和名称是LAYOUTFORM。谁能告诉我这里做错了什么?

对于奖励积分,我还希望按钮的文本在禁用时暂时更改为“正在创建...”,然后再次返回到创建PDF。

6 个答案:

答案 0 :(得分:13)

最简单的方法:

<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)
}

答案 1 :(得分:0)

您可以通过全球唯一的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")
}
BTW,HTML不一定(也不应该是,为了可读性等)都是大写的。

答案 2 :(得分:0)

删除文档和getElementById之间的LAYOUTFORM。

只是一个fyi,使用firebug,chrome开发者工具,或者IE的等效工具,你可以在控制台上使用你的javascript。 Console.log还将输出您可以检查的文本甚至对象(在CDT中)。非常适合探索:)

答案 3 :(得分:0)

几个问题。首先,在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>

答案 4 :(得分:0)

您的JavaScript存在两个主要问题:

  1. .getElementById()方法属于document,不属于您的表单(或任何其他)元素。

  2. setTimeout()期望第一个参数是一个函数(或一个字符串,但在使用字符串时几乎不会出现这种情况)。

  3. 试试这个:

    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);
    }
    

答案 5 :(得分:0)

<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