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

Question

我是一个相当新的使用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.

Answer 1

最简单的方法:

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

Answer 2

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 不需要（也不应该是，为了可读性等）全部大写。