2

In my VF page I want to disable the command button via Javascript(not through controller).

<apex:page id="thepage" standardController="Opportunity" extensions="OpportunityExt">  
 <apex:form id="theform"> 


        <script type="text/javascript">
        function run(){ 
        document.getElementById("thepage:theform:GoButton").disabled=true;
        }
        </script> 

  <apex:commandButton action="{!Go}" value="Go"
                        id="GoButton" onclick="run();"/>

  </apex:form> 


</apex:page>   

However I do not see the disabled being set with a value when do an inspect. What am I missing here?

enter image description here

  • It appears you would want to disable the button after your action on the button is performed, based on whether the operation is succeeded. Why not use apex:actionStatus to show a loading message, on complete based on apex operation disable the button? – Raul Dec 11 '17 at 23:12
4

You should set the btnDisabled class name, as well as setting "disabled". Here's a live example for you to use:

<apex:page standardStylesheets="true" lightningStylesheets="false" showHeader="true" >
    <apex:form>
        <script>
        function disableOther() {
            var btn = document.querySelector("[id$='btn2']");
            btn.className = 'btn btnDisabled';
            btn.disabled = 'disabled';
            return false;
        }
        </script>
        <apex:commandButton value="Button 1" onclick="return disableOther()"/>
        <apex:commandButton id="btn2" value="Button 2" />
    </apex:form>
</apex:page>
  • In his scenario the APEX call will make it re-render so the state will be lost. This is the proper way to disable it though, considering the state is preserved. – Boris Bachovski Dec 11 '17 at 23:36
  • @BorisBachovski One typical scenario is to disable the button on click to avoid double-submits. It may not matter afterwards if the state was lost, if the purpose is to prevent double-submits. Unfortunately, the question isn't entirely obvious what the intent is. – sfdcfox Dec 11 '17 at 23:40
  • Agreed @sfdcfox. – Boris Bachovski Dec 11 '17 at 23:44
  • Wow! Cool. Just what I wanted. Yes my intent was to prevent the user from clicking multiple times. Is btnDisabled a reserved keyword from btn.className = 'btn btnDisabled'; ? – Arnold Dec 12 '17 at 1:01
  • @Arnold it's just a css style that Visualforce uses to render the button as disabled. Without it, the button still appears clickable, but won't call the action because of the disabled attribute on the button. – sfdcfox Dec 12 '17 at 1:57
2

You're not missing anything, it's enough to specify the attribute on the element. You don't explicitly need to set a value (true/false). As long as the attribute is present, the element will be disabled.

Have a look here

  • Thanks however the button is not disabled when I click it. – Arnold Dec 11 '17 at 23:10
  • I'd either disable it via the visualforce disabled attribute, or use an HTML button instead of a commandbutton. Sometimes when combining standard visualforce components with JavaScript, things don't work as expected... – Boris Bachovski Dec 11 '17 at 23:17
  • Try adding return false; after you call the run() method: onClick="run(); return false;" – Boris Bachovski Dec 11 '17 at 23:19
  • I need to use commandButton as it is part of existing page. I tried return false; but no luck. – Arnold Dec 11 '17 at 23:22
  • Actually, your problem is that the Go() method will be executed and the page will re-render, therefore your button will return to the initial state. You'll need to store the button state in your controller and use the VF disabled attribute as I suggested earlier, if you want to keep it's state – Boris Bachovski Dec 11 '17 at 23:22

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.