How do I temporarily disable a submit button for 3 seconds (onsubmit), then re-enable it?

Question

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.

Answer 1

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