+ Start a Discussion
neshnesh 

Based on picklist selection, how to display corresponding pageblock section on VF page?

I am having a picklist field Name -(donationtype )with values Vehicle,money,shoe

Based on the value selected by the user, I want to hide another pageblock section on VF page.I am using action supportand rerender and render. but its not working 

Can someone pls help me with the code.

VF PAGE:

<apex:page standardController="Pickup_Donation__c" extensions="PickupDonationcont" showheader="false" id="page" >
<table style="width: 100%;" >
<tr>
<td align="center" >
<apex:image height="128" width="1002" url="{!URLFOR($Resource.webheader)}"/>
</td>
</tr>
</table>
<apex:form >
<apex:pageMessages ></apex:pageMessages>
<apex:pageBlock >
<apex:pageBlockButtons >
<apex:commandButton value="Submit" action="{!save}" />
<apex:commandButton value="cancel" action="{!cancel}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection title="Personal details" columns="2" >
<apex:inputfield required="true" label="First Name" value="{!Pickup_Donation__c.First_Name__c}" id="vn" />
<apex:inputfield required="true" label="Email" value="{!Pickup_Donation__c.Email__c}" id="vln2" />
<apex:inputfield required="true" label="Last Name" value="{!Pickup_Donation__c.Last_Name__c}" id="vln" />
<apex:inputfield required="true" label="Phone" value="{!Pickup_Donation__c.Phone__c}" id="vln1" />
<apex:inputfield label="Company Name" value="{!Pickup_Donation__c.Company_Name__c}" id="v1" />
</apex:pageBlockSection>
<apex:pageBlockSection title="Communication Info" columns="2" >
<apex:inputfield required="true" label="Street" value="{!Pickup_Donation__c.Street__c}" id="v2" /><br></br>
<apex:inputfield required="true" label="State/Province" value="{!Pickup_Donation__c.State_Province__c}" id="v3" /><br></br>
<apex:inputfield required="true" label="City" value="{!Pickup_Donation__c.City__c}" id="v43" /><br></br>
<apex:inputfield required="true" label="Zip/Postal Code" value="{!Pickup_Donation__c.Zip_Postal_Code__c}" id="v4" />
</apex:pageBlockSection>

<apex:pageBlockSection title="Donation Info" id="section1">

<apex:inputfield label="Donationtype" value="{!Pickup_Donation__c.Donation_type__c}" >
<apex:actionSupport event="onchange" reRender="section2"/>
</apex:inputField>


</apex:pageBlockSection>
<apex:outputPanel id="section2">
<apex:pageBlockSection title="Vehicles Info" rendered="{!Pickup_Donation__c.Donation_type__c == 'Vehicle'}" >
<apex:inputfield label="Vehicles Types" value="{!Pickup_Donation__c.Vehicles_Types__c}" id="textpop" />

</apex:pageBlockSection>
</apex:outputPanel>
</apex:pageBlock>
</apex:form>
<table>
<tr>
<td align="center" >
<apex:image height="128" width="1032" url="{!URLFOR($Resource.footer)}"/>
</td>
</tr>
</table>

</apex:page>

 

Best Answer chosen by Admin (Salesforce Developers) 
Avidev9Avidev9

hmm I see there are some required fields in the layout. I guess you ahve to use actionRegion to selective submit the page

 

<apex:page standardController="Pickup_Donation__c" extensions="PickupDonationcont" showheader="false" id="page">
    <table style="width: 100%;">
        <tr>
            <td align="center">
                <apex:image height="128" width="1002" url="{!URLFOR($Resource.webheader)}" />
            </td>
        </tr>
    </table>
    <apex:form>
        <apex:pageMessages></apex:pageMessages>
        <apex:pageBlock>
            <apex:pageBlockButtons>
                <apex:commandButton value="Submit" action="{!save}" />
                <apex:commandButton value="cancel" action="{!cancel}" />
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="Personal details" columns="2">
                <apex:inputfield required="true" label="First Name" value="{!Pickup_Donation__c.First_Name__c}" id="vn" />
                <apex:inputfield required="true" label="Email" value="{!Pickup_Donation__c.Email__c}" id="vln2" />
                <apex:inputfield required="true" label="Last Name" value="{!Pickup_Donation__c.Last_Name__c}" id="vln" />
                <apex:inputfield required="true" label="Phone" value="{!Pickup_Donation__c.Phone__c}" id="vln1" />
                <apex:inputfield label="Company Name" value="{!Pickup_Donation__c.Company_Name__c}" id="v1" />
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Communication Info" columns="2">
                <apex:inputfield required="true" label="Street" value="{!Pickup_Donation__c.Street__c}" id="v2" />
                <br></br>
                <apex:inputfield required="true" label="State/Province" value="{!Pickup_Donation__c.State_Province__c}" id="v3" />
                <br></br>
                <apex:inputfield required="true" label="City" value="{!Pickup_Donation__c.City__c}" id="v43" />
                <br></br>
                <apex:inputfield required="true" label="Zip/Postal Code" value="{!Pickup_Donation__c.Zip_Postal_Code__c}" id="v4" />
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Donation Info" id="section1">
                <apex:actionRegion>
                    <apex:inputfield label="Donationtype" value="{!Pickup_Donation__c.Donation_type__c}">
                        <apex:actionSupport event="onchange" reRender="section2" />
                    </apex:inputField>
                </apex:actionRegion>

            </apex:pageBlockSection>
            <apex:outputPanel id="section2">
                <apex:pageBlockSection title="Vehicles Info" rendered="{!Pickup_Donation__c.Donation_type__c == 'Vehicle'}">
                    <apex:inputfield label="Vehicles Types" value="{!Pickup_Donation__c.Vehicles_Types__c}" id="textpop" />

                </apex:pageBlockSection>
            </apex:outputPanel>
        </apex:pageBlock>
    </apex:form>
    <table>
        <tr>
            <td align="center">
                <apex:image height="128" width="1032" url="{!URLFOR($Resource.footer)}" />
            </td>
        </tr>
    </table>

</apex:page>

 

All Answers

Avidev9Avidev9

hmm I see there are some required fields in the layout. I guess you ahve to use actionRegion to selective submit the page

 

<apex:page standardController="Pickup_Donation__c" extensions="PickupDonationcont" showheader="false" id="page">
    <table style="width: 100%;">
        <tr>
            <td align="center">
                <apex:image height="128" width="1002" url="{!URLFOR($Resource.webheader)}" />
            </td>
        </tr>
    </table>
    <apex:form>
        <apex:pageMessages></apex:pageMessages>
        <apex:pageBlock>
            <apex:pageBlockButtons>
                <apex:commandButton value="Submit" action="{!save}" />
                <apex:commandButton value="cancel" action="{!cancel}" />
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="Personal details" columns="2">
                <apex:inputfield required="true" label="First Name" value="{!Pickup_Donation__c.First_Name__c}" id="vn" />
                <apex:inputfield required="true" label="Email" value="{!Pickup_Donation__c.Email__c}" id="vln2" />
                <apex:inputfield required="true" label="Last Name" value="{!Pickup_Donation__c.Last_Name__c}" id="vln" />
                <apex:inputfield required="true" label="Phone" value="{!Pickup_Donation__c.Phone__c}" id="vln1" />
                <apex:inputfield label="Company Name" value="{!Pickup_Donation__c.Company_Name__c}" id="v1" />
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Communication Info" columns="2">
                <apex:inputfield required="true" label="Street" value="{!Pickup_Donation__c.Street__c}" id="v2" />
                <br></br>
                <apex:inputfield required="true" label="State/Province" value="{!Pickup_Donation__c.State_Province__c}" id="v3" />
                <br></br>
                <apex:inputfield required="true" label="City" value="{!Pickup_Donation__c.City__c}" id="v43" />
                <br></br>
                <apex:inputfield required="true" label="Zip/Postal Code" value="{!Pickup_Donation__c.Zip_Postal_Code__c}" id="v4" />
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Donation Info" id="section1">
                <apex:actionRegion>
                    <apex:inputfield label="Donationtype" value="{!Pickup_Donation__c.Donation_type__c}">
                        <apex:actionSupport event="onchange" reRender="section2" />
                    </apex:inputField>
                </apex:actionRegion>

            </apex:pageBlockSection>
            <apex:outputPanel id="section2">
                <apex:pageBlockSection title="Vehicles Info" rendered="{!Pickup_Donation__c.Donation_type__c == 'Vehicle'}">
                    <apex:inputfield label="Vehicles Types" value="{!Pickup_Donation__c.Vehicles_Types__c}" id="textpop" />

                </apex:pageBlockSection>
            </apex:outputPanel>
        </apex:pageBlock>
    </apex:form>
    <table>
        <tr>
            <td align="center">
                <apex:image height="128" width="1032" url="{!URLFOR($Resource.footer)}" />
            </td>
        </tr>
    </table>

</apex:page>

 

This was selected as the best answer
neshnesh
Thanks for sharing Your Idea