9

我对使用 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。

4

6 回答 6

14

最简单的方法：

<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)
}
于 2012-05-15T01:41:11.817 回答
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")
}

顺便说一句，HTML 不需要（也不应该，为了可读性等）全部大写。

于 2012-05-15T01:31:23.343 回答
0

在 document 和 getElementById 之间删除 LAYOUTFORM。

仅供参考，使用 firebug、chrome 开发人员工具或任何适用于 IE 的等效工具，您可以在控制台上使用您的 javascript。Console.log 还将输出您可以检查的文本甚至对象（在 CDT 中）。对探索非常有用:)

于 2012-05-15T01:31:32.433 回答
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>
于 2012-05-15T01:33:16.800 回答
0

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

  1. 该.getElementById()方法属于document，而不属于您的表单（或任何其他）元素。

  2. 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);
}
于 2012-05-15T01:33:33.090 回答
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

于 2017-08-05T00:14:51.810 回答