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!

6
  • 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
    Commented Mar 7, 2019 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
    Commented Mar 7, 2019 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
    Commented Mar 7, 2019 at 16:21
  • Hi @cropredy - sorry if I wasn't clear enuff - I just edited the post.
    – Salvation
    Commented Mar 10, 2019 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
    Commented Mar 10, 2019 at 14:05

2 Answers 2

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.

0

I was able to solve this problem without the need of JQuery, and I was also with the need of a disabled button. I just called a window.onload function calling the button id as disabled and everything worked fine.

It is something like:

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

You must log in to answer this question.

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