Hide/Show Button On VisualForce Page

Question

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...

Answer 1

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:inputCheckbox
<apex:outputPanel id="theButtonPanel>
    <apex:commandButton styleClass="btn" value="Submit" id="recordSubmit" rendered="{!visibleSubmit}" action="{!insertRecord}"/>
</apex:outputPanel>

Answer 2

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:actionSupport>
        </apex:outputpanel>
        <apex:outputPanel id="button">
            <apex:commandButton value="Submit" rendered="{!check}"/>
        </apex:outputPanel>
    </apex:form>
</apex:page>

Controller:

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

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