You need to sign in to do that
Don't have an account?
Narayan H
How to Dynamically render of page section based on checkbox
I want to render a Company Info section of the VF page based on checking a firld "I don't have an Account". Here is my VF page. Appreciate your help
<apex:page standardController="RMA__c" >
<apex:form >
<apex:pageBlock >
<apex:outputLink value="/{!RMA__c.Id}" >Go Back to Case: {!RMA__c.Case_Number__c}</apex:outputLink>
</apex:pageBlock>
<apex:pageBlock title="Create RMA">
<apex:pageBlockButtons location="top">
<apex:commandButton value="Save" action="{!save}"/>
<apex:commandButton value="Cancel" action="{!cancel}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection title="Caller Details" columns="1" collapsible="false">
<apex:inputField required="true" value="{!RMA__c.First_Name__c}" label="First Name"/>
<apex:inputField required="true" value="{!RMA__c.Last_Name__c}" label="Last Name"/>
<apex:inputField required="true" value="{!RMA__c.Phone__c}" label="Phone #"/>
<apex:inputField required="true" value="{!RMA__c.Email_Address__c}" label="Email Address"/>
<apex:inputField value="{!RMA__c.Case__c}" label="Case Number"/>
<apex:inputField value="{!RMA__c.PO_Number__c}" label="PO Number"/>
<apex:inputField value="{!RMA__c.Account_Number__c}" label="Account Number"/>
<apex:inputCheckbox value="{!RMA__c.I_don_t_have_an_Account__c}" label="Don't have account">
<apex:actionSupport event="onchange" reRender="companyInfo"/>
</apex:inputCheckbox>
</apex:pageBlockSection>
<apex:pageBlockSection title="Company Details" columns="1" collapsible="true" id="companyInfo">
<apex:inputField value="{!RMA__c.Company_Name__c}" label="Company Name"/>
<apex:inputField value="{!RMA__c.Street_Address__c}" label="Street Address"/>
<apex:inputField value="{!RMA__c.City__c}" label="City"/>
<apex:inputField value="{!RMA__c.State__c}" label="State"/>
<apex:inputField value="{!RMA__c.Zip_Postal_Code__c}" label="Zip/Postal Code"/>
</apex:pageBlockSection>
<apex:detail relatedList="false"/>
</apex:pageBlock>
</apex:form>
</apex:page>
<apex:page standardController="RMA__c" >
<apex:form >
<apex:pageBlock >
<apex:outputLink value="/{!RMA__c.Id}" >Go Back to Case: {!RMA__c.Case_Number__c}</apex:outputLink>
</apex:pageBlock>
<apex:pageBlock title="Create RMA">
<apex:pageBlockButtons location="top">
<apex:commandButton value="Save" action="{!save}"/>
<apex:commandButton value="Cancel" action="{!cancel}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection title="Caller Details" columns="1" collapsible="false">
<apex:inputField required="true" value="{!RMA__c.First_Name__c}" label="First Name"/>
<apex:inputField required="true" value="{!RMA__c.Last_Name__c}" label="Last Name"/>
<apex:inputField required="true" value="{!RMA__c.Phone__c}" label="Phone #"/>
<apex:inputField required="true" value="{!RMA__c.Email_Address__c}" label="Email Address"/>
<apex:inputField value="{!RMA__c.Case__c}" label="Case Number"/>
<apex:inputField value="{!RMA__c.PO_Number__c}" label="PO Number"/>
<apex:inputField value="{!RMA__c.Account_Number__c}" label="Account Number"/>
<apex:inputCheckbox value="{!RMA__c.I_don_t_have_an_Account__c}" label="Don't have account">
<apex:actionSupport event="onchange" reRender="companyInfo"/>
</apex:inputCheckbox>
</apex:pageBlockSection>
<apex:pageBlockSection title="Company Details" columns="1" collapsible="true" id="companyInfo">
<apex:inputField value="{!RMA__c.Company_Name__c}" label="Company Name"/>
<apex:inputField value="{!RMA__c.Street_Address__c}" label="Street Address"/>
<apex:inputField value="{!RMA__c.City__c}" label="City"/>
<apex:inputField value="{!RMA__c.State__c}" label="State"/>
<apex:inputField value="{!RMA__c.Zip_Postal_Code__c}" label="Zip/Postal Code"/>
</apex:pageBlockSection>
<apex:detail relatedList="false"/>
</apex:pageBlock>
</apex:form>
</apex:page>
The easy way is to use this trick with javascript.
1) Add : onclick for the checkbox given that this checkbox is always unchecked by default.
<apex:inputCheckbox value="{!RMA__c.I_don_t_have_an_Account__c}" label="Don't have account" onclick="myFunction()" >
</apex:inputCheckbox>
2) Put the block section in a hidden div by default:
<div id="myDIV" style="display:none">
<apex:pageBlockSection title="Company Details" columns="1" collapsible="true">
<apex:inputField value="{!RMA__c.Company_Name__c}" label="Company Name"/>
...
</apex:pageBlockSection>
</div>
3) Use a little javascript code to toggle the value of the display attribute.
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<apex:form >
Best regards
Alain