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…
Best Answer
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:
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 thecommandbutton
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:
(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: