I am fairly new to using javascript and here is what I have so far:

<!-- 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?

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.

I am fairly new to using javascript and here is what I have so far:

<!-- 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?

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.

• javascript
• form-submit

• setTimeout – Musa Commented May 15, 2012 at 1:28
• That's a lovely idea! Thank you. – ninjagecko Commented May 15, 2012 at 1:34
• AmazingChase please accept an answer. – Pablo Pazos Commented Oct 14, 2017 at 15:54

6 Answers 6

Simplest way:

<input ... onclick="lockoutSubmit(this)">

In your javascript:

function lockoutSubmit(button) {
    var oldValue = button.value;

    button.setAttribute('disabled', true);
    button.value = '...processing...';

    setTimeout(function(){
        button.value = oldValue;
        button.removeAttribute('disabled');
    }, 3000)
}

Drop the LAYOUTFORM between document and getElementById.

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

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:

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>

You can access the button either by id that is globally unique or by the name unique to the enclosing form

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:

<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(removeAttr, 3000);

function removeAttr() {
    x.removeAttribute("disabled")
}

BTW, HTML need not be (and should not be, for readability etc) all uppercase.

There are two main problems with your JavaScript:

1. The .getElementById() method belongs to document, not to your form (or any other) element.

2. 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).

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 .disabled property directly (like you were already doing when you disabled the element).

EDIT: Just saw the "bonus points" part of your question. You just need to set the .value property:

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