function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Bhargav krishna 1Bhargav krishna 1 

Hide/Show the custom fields in vfpage


Hi everyone,
I have created a custom objectand in that i have a picklist field when ever we choose the value in that i want to show Date field and another picklist field. But by default these two fields must be hidden. Can help me over here.
Thanks In advance.
Regards,
Bhargav.
Amit VaidyaAmit Vaidya
Hi Bhargav,

This code example will help you. 
<apex:page standardController="Opportunity">
      <apex:form >
          <apex:pageBlock title="Enter Opportunity Information">
              <apex:pageBlockButtons location="bottom">
                  <apex:commandButton value="Save" action="{!Save}"/>
                  <apex:commandButton value="Cancel" action="{!Cancel}" immediate="true"/>                                
              </apex:pageBlockButtons>
              <apex:PageblockSection columns="1" >
                      <apex:inputField value="{!Opportunity.Name}"/>
                     <apex:PageBlockSectionItem >
                         <apex:outputLabel value="Stage"/>
                         <apex:actionRegion >
                          <apex:inputField value="{!Opportunity.StageName}">
                          <apex:actionSupport event="onchange" reRender="ajaxrequest" />
                          </apex:inputField>
                         </apex:actionRegion>
                      </apex:PageBlockSectionItem>
                  </apex:PageblockSection>
              <apex:outputPanel id="ajaxrequest">   
                  <apex:pageBlockSection rendered="{!Opportunity.StageName=='Prospecting'}" >
                      
                      <apex:inputField value="{!Opportunity.CloseDate}"/>
              
                  </apex:pageBlockSection>
              </apex:outputPanel> 
          </apex:pageBlock>
      </apex:form>
Refer the answer on https://developer.salesforce.com/forums/?id=906F000000096zcIAA.

Thanks,
Amit
 
N.M. SharmaN.M. Sharma
Hi Bhargav,

There are two way to show and hide your field.

1. Using JQuery : If you have include JQuery you can make a function and on change picklist value call the method and according to your value you can easily show and hide your value. 
function test(){
            $('[id$="yourFiledid"]').hide();

            $(".Your Filed Style Class"]').hide();
}



2. Using Flag with Rendered: First make a flag varriable in Controller and add the flag in Rerendered with those field which you want to hide and show. You can add a action support with your picklist and call the action function. In Action function you need to rendered that pannel you want to refresh and after that according your picklist value you put the true and false value in flag variable and easily hide and show your fields.
For Example check this link: https://developer.salesforce.com/forums/?id=906F000000098e9IAA

Thanks 
Ajay K DubediAjay K Dubedi
Hi Bhargav krishna,
You can do this with the help of JQuery. In the following code :
 test__c is a picklist field value on Account object.
 Choose_Date__c is a date type field on Account object. 
<apex:page standardController="Account">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<apex:form >
 <apex:pageBlock >
     <apex:pageBlockSection >
         <apex:inputField value="{!Account.Name}" ONkeypress="showdiv0()"/>  
     </apex:pageBlockSection>
         <div id="div0">
      <apex:pageBlockSection >
          <apex:inputField value="{!Account.test__c}" />
      </apex:pageBlockSection>
 </div>
  </apex:pageBlock>
  <div id="div1">
     <apex:pageBlock >
      <apex:pageBlockSection >
         <apex:inputField value="{!Account.Choose_Date__c}"  />
      </apex:pageBlockSection>
    </apex:pageBlock>
 </div>
</apex:form>
                      <script >
                                var $ = jQuery.noConflict();
                                $(document).ready(function(){
                                $("#div1").hide();
                                 $("#div0").hide();
                                });
                                function showdiv0(){
                                  $("#div0").show();
                                  $("#div1").show();
                                }   
                     </script>
</apex:page>
Regards,
Ajay
Bhargav krishna 1Bhargav krishna 1
Thank You all.