0

I am trying to disable a button after the first click, but for some reason it is not executing. Could anyone help me identify the issue?

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">

      $('input[id$=submitButton]').on('click', function(){
          $('input[id$=submitButton]').attr('disabled','disabled');
       });
</script>


<apex:commandButton id="submitButton" value="{!$Label.Disaster_Submit}" action="{!saveConsent}" styleClass="btn btn-fill btn-danger btn-wd btn-sm"  > 
</apex:commandButton>
0

Doing it this way disables the button before the form is posted, so the form submission won't include the click to call saveConsent.

I'm not seeing rerendering so doing this with an Action Status may work for you.

 <apex:actionStatus id="aSaveStatus">
   <apex:facet name="stop">
      <apex:commandButton id="submitButton" status="aSaveStatus" value="{!$Label.Disaster_Submit}" action="{!saveConsent}" styleClass="btn btn-fill btn-danger btn-wd btn-sm" />
   </apex:facet>
   <apex:facet name="start">
     <apex:commandButton disabled="true" status="aSaveStatus" value="{!$Label.Disaster_Submit}" styleClass="btn btn-fill btn-danger btn-wd btn-sm" />
   </apex:facet>
 </apex:actionStatus>

If this doesn't give you what you're looking for, you could also look to an ActionFunction, to call your saveConsent. The javascript associated with the commandButton would then be responsible for disabling itself, then calling the ActionFunction.

I didn't test this, but you get the idea:

<script type="text/javascript">
    function aJsFunction(elementId){
        var yourButton = document.getElementById(elementId);
        yourButton.disabled = true;

        anActionFunction();
        //since we don't need the form to submit
        return false;
    }
</script>

<apex:actionFunction name="anActionFunction" action="{!saveConsent}" />

<apex:commandButton id="submitButton" value="{!$Label.Disaster_Submit}" onclick="return aJsFunction('{!$component.submitButton');" styleClass="btn btn-fill btn-danger btn-wd btn-sm"  > 
</apex:commandButton>
  • Thank you for the feedback. The action function is really what solved my problem. Here is the complete code: $(document).ready(function() { $('input[id$=submitButton]').on('click', function(){ $('input[id$=submitButton]').attr('disabled','disabled'); callSaveConsent(); return false; }); }); <apex:actionFunction name="callSaveConsent" action="{!saveConsent}" /> <apex:commandButton id="submitButton" value="{!$Label.Disaster_Submit}" styleClass="btn btn-fill btn-danger btn-wd btn-sm"> – Ivo Dimov Mar 21 at 16:19
0

To disable a command button the attribute disabled takes a Boolean value. either True or False.

<script type="text/javascript">
            function validate() {
                // validate code here and call saveConsent

            }
        </script>
     <apex:commandButton id="submitButton" value="button" action="{!saveConsent}" styleClass="btn btn-fill btn-danger btn-wd
         btn-sm"  onclick="this.disabled=true;validate();">  </apex:commandButton>
  • Yes, I have tried that as well, but it would still not work. – Ivo Dimov Mar 21 at 12:08
  • The above edit worked for me. Can you please try and let me know – 7'7' Mar 21 at 12:25
  • Thank you for the suggestion. The button does seem to be grayed out after a click, but my action method does not get executed. – Ivo Dimov Mar 21 at 12:34
  • If the above suggestion works for you then you can call a JS function on click along with disabling it and then check for the disabled property and call the saveConsent method of apex. An edit has been made – 7'7' Mar 21 at 12:39
  • I have the feeling the issue I am experiencing is related to the verion of JQuery I am using related to the onclick. Maybe I need to use a different version? <script src="code.jquery.com/jquery-1.11.0.min.js"></script> – Ivo Dimov Mar 21 at 14:21

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.