3

I would like to show or hide fields depending on the value of another field. I was not able to find and implement the existing topics.

function selectService (){
   if($jquery('[id$=inField1]').val() == "value_1"){
       /* TODO Hide $id inField2*/
   }
}

<apex:form>
    <apex:pageBlockSection title="Informations">
       <apex:inputField value="{!Object__c.Field1__c}" onchange="selectService();" id="inField1"/>
       <apex:inputField value="{!Object__c.Field2__c}" id="inField2"/>
</apex:form>

When the #inFields1 value = value_1, I want Hide #inField2. What are the best solution ? It must use the attribute 'rendered' ? Thank's

2
  • 1
    Have you tried to use hide() function of the jQuery? Like $jquery('[id$=inField2]').hide(); Apr 16 '14 at 12:31
  • I just tried, but it doesn't hide the label. Apr 16 '14 at 12:35
4

You can use rendered attribute of the apex:inputField. So if the Object__c.Field1__c = value_1 it will be not shown at all:

<apex:actionFunction name="showHideField2" reRender="mySection"/>

<apex:form>
    <apex:pageBlockSection title="Informations" id="mySection">
       <apex:inputField value="{!Object__c.Field1__c}" onchange="showHideField2();" id="inField1"/>
       <apex:inputField value="{!Object__c.Field2__c}" id="inField2" rendered="{!Object__c.Field1__c != 'value_1'}"/>
</apex:form>

The apex:actionFunction works like a normal javascript function but can do reRender of the visualforce components.

Or you can use a jQuery solution for that as well. You will need to define an label for the outputField and hide that label together with a field:

function selectService (){
   if($jquery('[id$=inField1]').val() == "value_1"){
       $jquery('[id$=inField2]').hide();
       $jquery('[id$=inField2Label]').hide();
   }
   else{
       $jquery('[id$=inField2]').show();
       $jquery('[id$=inField2Label]').show();
   }
}

<apex:form>
    <apex:pageBlockSection title="Informations">
       <apex:inputField value="{!Object__c.Field1__c}" onchange="selectService();" id="inField1"/>     
       <apex:pageBlockSectionItem>
           <apex:outputLabel value="{!$ObjectType.Object__c.fields.Field2__c.label}" id="inField2Label"/>
           <apex:inputField value="{!Object__c.Field2__c}" id="inField2"/>
       <apex:pageBlockSectionItem>
</apex:form>
5
  • Ok thank you, the first solution seems to me, but I can't identify all working. Apr 16 '14 at 13:26
  • @SimonG What's the problem? Apr 16 '14 at 13:42
  • I don't understand the attribute reRender and why conditions != Apr 16 '14 at 14:13
  • And why not use the attribut showHeader ? Apr 16 '14 at 14:43
  • I solved my problem. I took your first code hide() applied on pageBlockSection. But your code interested me and I will servire. Apr 16 '14 at 14:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.