Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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

share|improve this question
1  
Have you tried to use hide() function of the jQuery? Like $jquery('[id$=inField2]').hide(); –  mast0r Apr 16 at 12:31
    
I just tried, but it doesn't hide the label. –  SimonG Apr 16 at 12:35
add comment

1 Answer 1

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>
share|improve this answer
    
Ok thank you, the first solution seems to me, but I can't identify all working. –  SimonG Apr 16 at 13:26
    
@SimonG What's the problem? –  mast0r Apr 16 at 13:42
    
I don't understand the attribute reRender and why conditions != –  SimonG Apr 16 at 14:13
    
And why not use the attribut showHeader ? –  SimonG Apr 16 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. –  SimonG Apr 16 at 14:52
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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