Remove disabled attribute from command button

Question

I have a command button given below

 <apex:commandButton action="{!save}" id="save" value="Save" onclick="disableOnSubmit(this);" onComplete="buttonEnabled(this);"/>

When I click this button it gets disabled by function onclick given below where id is the id passed in the function of the save onclick . Now the problem I am facing is when the click completes then I want it to enable again by oncomplete. So how can I remove the disable attribute here. below is what I have tried so far

function disableOnSubmit(id){
    var toDisable = document.getElementById(id);
    toDisable.disabled = 'disabled';
}

function buttonEnabled(input){
    var toEnable = document.getElementById(input);
    toEnable.disabled = false;
}

This does not works and the button does not enables again.

Answer 1

You need to entirely remove the disabled attribute, not just set it to false. Also, your getElementById call will fail too - you already have a reference to the button in the event - use that.

Try this:

function buttonEnabled(event){
    var bttn = event.currentTarget;
    delete bttn.disabled;
}

Also, I noticed that your oncomplete event handler has the wrong case. Change your button definition to this:

 <apex:commandButton action="{!save}" id="save" value="Save" onclick="disableOnSubmit(this);" oncomplete="buttonEnabled(this);"/>