3

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

Improve this question
1
  • 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
    Commented Dec 11, 2017 at 23:12

2 Answers 2

Reset to default
6

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>
Improve this answer
5
  • 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
    Commented Dec 11, 2017 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 ♦
    Commented Dec 11, 2017 at 23:40
  • Agreed @sfdcfox.
    – Boris Bachovski
    Commented Dec 11, 2017 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
    Commented Dec 12, 2017 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 ♦
    Commented Dec 12, 2017 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

Improve this answer
5
  • Thanks however the button is not disabled when I click it.
    – Arnold
    Commented Dec 11, 2017 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
    Commented Dec 11, 2017 at 23:17
  • Try adding return false; after you call the run() method: onClick="run(); return false;"
    – Boris Bachovski
    Commented Dec 11, 2017 at 23:19
  • I need to use commandButton as it is part of existing page. I tried return false; but no luck.
    – Arnold
    Commented Dec 11, 2017 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
    Commented Dec 11, 2017 at 23:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .