[SalesForce] Javascript show/hide fields based on picklist value

<apex:page controller="newOpportunityController" tabStyle="Contact" >
<body>
    <script language="javascript" type="text/javascript">

    function hidefieldsforfemale()
        {
            if (document.getelementbyid('{!$Component.f1.pb2.pbs2.female}') == "Female" )
                {
                    document.write("inside female section");
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id1}').style.display='none';
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id2}').style.display='none';
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id3}').style.display='none';
                 }
                else
                  {
                    document.write("inside male section");
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id1}').style.visbility="visible";
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id2}').style.visbility="visible";
                    document.getelementbyid('{!$Component.f1.pb2.pbs2.id3}').style.visbility="visible";
                   }
            return true;
          }

</script>


  <apex:form  id="f1">
    <apex:pageMessages />
      <apex:pageBlock id="pb1" rendered="{!showp2op1}" title="Members already added">
        <apex:outputPanel id="op1"  >
              <apex:pageBlockTable value="{!contactstoadd}" var="c" >
                  <apex:column value="{!c.firstname} {!c.lastname}" headerValue="Name" />
            </apex:pageBlockTable>
            <apex:commandButton action="{!page3Next}" value="Confirmation" immediate="true" />
        </apex:outputPanel>


      </apex:pageBlock>
         <apex:pageBlock id="pb2" title="Member Information" mode="edit">

               <apex:pageblockSection id ="pbs1" title="Name and Contact" columns="2">
                   <apex:inputfield value="{!cont.firstname}"/>
                   <apex:inputfield value="{!cont.lastname}"/>
                   <apex:inputfield value="{!cont.mobilephone}"/>
                   <apex:inputfield value="{!cont.email}"/>
                   <apex:inputfield value="{!cont.birthdate}"   />
               </apex:pageblockSection>

              <apex:pageblockSection id="pbs2" title="Member Details" columns="3">
                  <apex:inputfield value="{!cont.Gender__c}" onchange="hidefieldsforfemale();" id="female" 
                                   onfocus="alert('focus on field')"  />
                   <apex:inputfield value="{!cont.Birthstar__c}"/>
                   <apex:inputfield value="{!cont.Related_to_Householder__c}"/>
                   <apex:inputfield value="{!cont.Know_Sanskrit__c}"/>
                   <apex:inputfield value="{!cont.Service_Interest__c}"/>
                   <apex:inputfield value="{!cont.Work__c}"/> 
                   <apex:inputfield value="{!cont.Upanayanam__c}" id="id1"/>                       
                   <apex:inputfield value="{!cont.Veda_Adhyayanam_Status__c}" id="id2"/>                       
                   <apex:inputfield value="{!cont.Veda_Patasala__c}" id="id3" />                    
               </apex:pageblocksection>


                <apex:pageblockSection title="Address Information" columns="2">
                   <apex:inputfield value="{!cont.mailingstreet}"/>
                   <apex:inputfield value="{!cont.mailingcity}"/>
                   <apex:inputfield value="{!cont.mailingstate}"/>
                   <apex:inputfield value="{!cont.mailingcountry}"/>
                   <apex:inputfield value="{!cont.mailingpostalcode}"/>
               </apex:pageblockSection>




        <apex:pageBlockButtons location="bottom">
             <apex:commandButton action="{!page1Next}" value="Previous" immediate="true" rendered="{!p2button1}"/>
             <apex:commandButton action="{!addmorecontacts}" value="Add more members" rendered="{!p2button2}"/>
             <apex:commandButton action="{!back2search}" value="Save & Back to search results" rendered="{!p2button3}"/>
             <!-- apex:commandButton action="{!page3Next}" value="Confirmation"  /-->

                <!--apex:commandButton action="{!saveacct}" value="Save"/ -->

        </apex:pageBlockButtons>

</apex:pageBlock>

When I chooose the picklist value of female, the fields with id1, id2 and id3 should be hidden. This is somehow not working. Any help would be appreciated.

Also, could this be done using VF itself. Please advise your thoughts.

Best Answer

This should work:

<script>
function hidefieldsforfemale() {
    var gender = document.getElementById('{!$Component.f1.pb2.pbs2.female}').value;
    var display = gender == 'Female' ? 'None' : 'Inline';
    document.getElementById('{!$Component.f1.pb2.pbs2.id1}').style.display=display;
    document.getElementById('{!$Component.f1.pb2.pbs2.id2}').style.display=display;
    document.getElementById('{!$Component.f1.pb2.pbs2.id3}').style.display=display;
}
</script>

Your code was comparing the DOM element with "Female" rather than the value of that DOM element. You were also setting the display attribute in one case and the visibility in the other rather than flipping the value of one attribute.

On the question of whether it can be done in Visualforce, yes it can. You can re-render part of the page with rendered attribute of the apex:inputField set to a Boolean expression based on the gender value. The UI is a bit slow to respond (compared to the instant response you get with JavaScript) but the code is cleaner and that approach is more in keeping with the design of Visualforce.

Related Topic