0

I'm trying to make a checkbox (for disclaimer) - until this checkbox is checked - a submit button should be disabled.

It does not seem to be much difficult and yet - I missed something here.

my code :

Checkbox:

 <apex:inputCheckbox id="disclaimerCheckBox" style="margin-left: 20px;" onchange="disableSubmitButton(this);">
 </apex:inputCheckbox>

Button:

<div class="form-group text-center">
    <apex:commandButton disabled="true" id="submitBtn" action="{!save}"  styleClass="btn btn-primary" rerender="hiddenForm" oncomplete="submitForm('{!sid}');" value="Submit"  status="statusSaveTrip"/>
</div>

JS FUNCTION:

function disableSubmitButton(checkbox){
    if(checkbox.checked){
        document.querySelector("[id$='submitBtn']").disabled = false;

    }else{
        document.querySelector("[id$='submitBtn']").disabled = true;

    }

}

Everything is working as expected, except that the save action inside the command button is not working even though it clickable.

I believe the problem is on the disable=true on the command button - But how can I make the button to be disabled from the begging?

I tried to do the "document.ready" in JS :

(function() {

    document.querySelector("[id$='submitBtn']").disabled = true;

 })();

But it gives me an error that its null.

I know I can do it with the Controller variable - but I want to stay on the client side.

I would much appreciate your help.

EDIT :

because I added the attribute: "disable" to the command button component - I thought that with the javascript("disableSubmitButton" function ), I can change the value of it to True or to false.

but I think I got wrong here.

the button was clickable and not clickable base on the disable value that I passed in the Js function ("disableSubmitButton") but because I added the "disable:true" inside the command button component - the button was clickable because of the Js function when I changed the disalbe to false but the save action (Its a controller without standard controller or any other extantions - Its a logic that I wrote) wasnt called.

I just got a permission to install JQuery to the project (I was not used it because of matters of bureaucracy) But now I just used the $j(document).ready(functio() so it solve my issue.

Thanks a lot! Thanks!

  • why do you have an actionmethod and an onComplete for the save button? -- the action method will transmit the form's contents to the controller's save method and the page will either redirect or redisplay, depending on what the save action does – cropredy Mar 7 at 0:08
  • It there because I need to make a post redirect with params that cannot do on the server side (Page reference) - so when the save button clicked and the save is done on the server side I'm submitting a form using JS (on complete). – Salvation Mar 7 at 8:05
  • save action inside the command button is not working even though it is clickable - meaning what? the controller method starts but does nothing? controller method is never called? are you using a standard controller w/ extension, custom controller, or straight-out standard controller/no extension? Use edit to amend your post with this info – cropredy Mar 7 at 16:21
  • Hi @cropredy - sorry if I wasn't clear enuff - I just edited the post. – Salvation Mar 10 at 7:43
  • Based on what you've shared, you could have solved this without jQuery by making the Button either active or inactive depending on the value of the checkbox. – crmprogdev Mar 10 at 14:05
0

I used jQuery ready function to disable the button on the onload of the page :

$j(document).ready(function(){
      document.querySelector("[id$='submitBtn']").disabled = true;
  });

and then, every click on the checkbox - I disable or enable the button to be clicked :

 function disableSubmitButton(checkbox){
      if(checkbox.checked){
           document.querySelector("[id$='submitBtn']").disabled = false;

      }else{
          document.querySelector("[id$='submitBtn']").disabled = true;

      }


  }

When I used the "disabled" variable on the button component - I couldn't then change it on the JS function with document.querySelector("[id$='submitBtn']").disabled = false;

somehow It not worked for me.

I believe there is a better solution but this one helped me.

Thanks.

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.