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.

  • I found a few other things - take a look now. – Caspar Harmer Jul 20 '16 at 18:28

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);"/>
  • This is not working – Abhinav Pandey Jul 20 '16 at 18:10
  • Events in apex objects are case sensitive. Change onComplete to oncomplete – Caspar Harmer Jul 20 '16 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.