I am trying to show/hide a submit button on my VF page based on a checkbox but its not rendering.

Here's what I have already tried:

On the controller I have defined the boolean condition as shown below:

public Boolean visibleSubmit { get; set; }

Then I have added this script below to my VisualForce Page:

function termsAccepted() {
        if (document.getElementById('tncs').checked) {
            visibleSubmit = true;
        } else {
            alert("You did not accept the terms and conditions.");
            visibleSubmit = false;

Then on the checkbox and button I have set it as follows:

<apex:inputCheckbox id="tncs" required="true" onclick="termsAccepted()" value="{!partnerAgreement}"/>Terms and Conditions</p>

<apex:commandButton styleClass="btn" value="Submit" id="recordSubmit" rendered="{!visibleSubmit}" action="{!insertRecord}"/>

Many thanks for the assistance...

  • You've got 2 variables for JS and Apex called visibleSubmit correct? You're not passing the value of the JS visibleSubmit to the Apex one?
    – Dan Jones
    Sep 30, 2016 at 13:59
  • Hi @Poet thank you very much for your response. Yes I have named the variables visibleSubmit should I give them different names. My apologies I am not quite following Sep 30, 2016 at 14:38

2 Answers 2


Changing a variable's value in javascript won't update it in your APEX controller and also won't rerender the commandbutton.

You have 2 options:

  1. go javascript. Arrange the button visibility by css styling
  2. go visualforce. Arrange the button visibility by visualforce

I'll give an example of the Visualforce way here, as we're on the salesforce boards :-)

When the checkbox is checked, you want to do 2 things: update the visibleSubmit boolean and rerender the commandbutton so it will be shown (or not).

In order to do that, the first step is to associate the visibleSubmit variable directly with your checkbox:

<apex:inputCheckbox id="tncs" required="true" value="{!visibleSubmit}"/>

(Not sure what the partnerAgreement variable is that is currently in the checkbox? If that's a boolean as well, you might use that instead of visibleSubmit to decide whether or not to render the button. But then you also have to use 'partnerAgreement' in the 'rendered' option of the commandButton.)

Secondly, you need to rerender the commandbutton when the checkbox changes. The way to do that is using an actionsupport. The actionsupport can be directly attached to the checkbox. Also you need to wrap the commandButton in a panel, so that you can easily rerender the panel:

<apex:inputCheckbox id="tncs" required="true" value="{!visibleSubmit}">
    <apex:actionSupport event="onchange" rerender="theButtonPanel" />
<apex:outputPanel id="theButtonPanel>
    <apex:commandButton styleClass="btn" value="Submit" id="recordSubmit" rendered="{!visibleSubmit}" action="{!insertRecord}"/>
  • 1
    Guy -- Minor point ... I think you meant use actionSupport, not actionFunction as that is what your example shows. Goal is to invoke an AJAX event so controller is called and a partial page refresh can be done. actionSupport will transmit values to setters but not invoke an action method in the controller; actionFunction will invoke an action method and can pass parameter values to setters. Either would work for the OP but your solution is simplest
    – cropredy
    Oct 2, 2016 at 19:36
  • Thank you very for the assistance and explanation. You were very helpful Oct 3, 2016 at 7:23
  • Thanks guys but currently I am getting the error below: apex:inputFile can not be used in conjunction with an action component, apex:commandButton or apex:commandLink that specifies a rerender or oncomplete attribute. I tried to wrap the commandButton inside <apex:actionregion></apex:actionregion> but I am still getting the error. Oct 3, 2016 at 7:49
  • an apex:inputfile on the page changes matters quite a bit.. In order not to mix up questions and answers, I'd suggest opening a new question and including your vf page (including the inputfile). Then refer it here, so I can find it and help you with that. Oct 3, 2016 at 9:07

Hi this is my first answer!!!

I have just done this in my org using <apex:actionSupport/>

This is a very simple code:

VF Page:

    <apex:page controller="DisplayButtononCheckboxEvent">
    <apex:form >
        <apex:outputpanel id="counter">
            <apex:actionSupport event="onclick" rerender="button">
           <apex:inputCheckbox value="{!check}"/>  

        <apex:outputPanel id="button">
            <apex:commandButton value="Submit" rendered="{!check}"/>


public class DisplayButtononCheckboxEvent {
    public boolean check{get;set;}

Do let me know if this helps you.. Happy Coding!!!

  • 1
    thanks a lot Rishab but I am getting the following error: apex:inputFile can not be used in conjunction with an action component, apex:commandButton or apex:commandLink that specifies a rerender or oncomplete attribute. Oct 6, 2016 at 7:12
  • Hey there, the error you are getting is for apex:inputFile, which is a little different. To help you out I need the Code of VF page, you can share the code by posting a new question and can share the link in comments. Hopefully we can solve the issue. Oct 6, 2016 at 7:45
  • 1
    thanks Rishab will do that, how can I chat with you, if possible Oct 6, 2016 at 8:12
  • Hey User23, Sorry for the delay in comment. You can chat with me on skype : @rishabhseth123 or can get in touch with me on gmail [email protected] Oct 10, 2016 at 5:59

You must log in to answer this question.

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