+ Start a Discussion
Ravindar AdminRavindar Admin 

How to appear a field based on the two different field values?

I have 3 fields on visualforce page of custom object,
1) gender__c:Male/female(picklist field) 2) age__c: (number field) 3) field3__c:(picklist field)
The field3__c only display, If the gender__c=female & age__c>12.
Best Answer chosen by Ravindar Admin
Shruti SShruti S
Here is the working code - 
Apex Controller Extension
public class EmployeeExtension {
    public EmployeeExtension( ApexPages.StandardController controller ) {
        
    }
    
    @RemoteAction
    public static Integer calculateAge( String dateOfBirth ) {
        Date dob = Date.parse( dateOfBirth );
        Integer age;

        if( Date.today().month() > dob.month() ) {
            age = Date.today().year() - dob.year();
        }
        else if( 
            Date.today().month() == dob.month() && 
            Date.today().day() >= dob.day() 
        ) {
            age = Date.today().year() - dob.year();
        }
        else {
            age = Date.today().year() - dob.year() - 1 ;
        }
        
        return age;
    }
}

Visualforce
<apex:page id="page" standardController="Employee__c" extensions="EmployeeExtension">
    <apex:form id="form">
        <apex:pageBlock id="pgblk" mode="edit" title="Employee Edit">
            <apex:pageBlockSection id="pgblksec" title="Information" columns="2">
                <apex:inputField id="inpFldGender" value="{!Employee__c.Gender__c}" onchange="displayField3()"></apex:inputField>
                <apex:inputField id="inpFldDateOfBirth" value="{!Employee__c.Date_of_Birth__c}" onchange="calculateAge()"></apex:inputField>
                <apex:inputField id="inpFldAge" value="{!Employee__c.Age__c}" onchange="displayField3()"></apex:inputField>
                <apex:inputField style="display:none" id="inpFld3" value="{!Employee__c.Field3__c}"></apex:inputField>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">
        var displayField3 = function() {
            var genderVal   = $( "[id*='inpFldGender']" ).val();
            var ageVal      = $( "[id*='inpFldAge']" ).val();
            
            if( genderVal === 'Female' && ageVal > 12 ) {
                $( "[id*='inpFld3']" ).show();
                $( "[for*='inpFld3']" ).show();
            }
            else {
                $( "[id*='inpFld3']" ).hide();
                $( "[for*='inpFld3']" ).hide();
            }
        };
        
        var calculateAge = function() {
            var dobVal   = $( "[id*='inpFldDateOfBirth']" ).val();
            
            EmployeeExtension.calculateAge(
                dobVal,
                function( result, event ) {
                    $( "[id*='inpFldAge']" ).val( result );
                    
                    displayField3();
                }
            );
        };
        
        displayField3();
    </script>
</apex:page>

Sorry for the late response, I hope this works.

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Ravindar,

Please check with below link from stack exchange community with suggested solution. Mark this as solved if it's resolved so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Thanks,
Nagendra
Shruti SShruti S
User-added image

You can implement this on the client side using jQuery. In the jQuery, create a function to collect the Gender and Age values entered by the User. Then check if the Gender is Female and Age is greater than 12. If yes, then show the Field3 input field using show method of jQuery else Hide it. And then call this method in the onchange of the Gender and Age input fields.

Here is the markup - 
<apex:page id="page" standardController="Employee__c">
    <apex:form id="form">
        <apex:pageBlock id="pgblk" mode="edit" title="Employee Edit">
            <apex:pageBlockSection id="pgblksec" title="Information" columns="2">
                <apex:inputField id="inpFldGender" value="{!Employee__c.Gender__c}" onchange="displayField3()"></apex:inputField>
                <apex:inputField id="inpFldAge" value="{!Employee__c.Age__c}" onchange="displayField3()"></apex:inputField>
                <apex:inputField style="display:none" id="inpFld3" value="{!Employee__c.Field3__c}"></apex:inputField>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">
        var displayField3 = function() {
            var genderVal   = $( "[id*='inpFldGender']" ).val();
            var ageVal      = $( "[id*='inpFldAge']" ).val();
            
            if( genderVal === 'Female' && ageVal > 12 ) {
                $( "[id*='inpFld3']" ).show();
                $( "[for*='inpFld3']" ).show();
            }
            else {
                $( "[id*='inpFld3']" ).hide();
                $( "[for*='inpFld3']" ).hide();
            }
        };
        
        displayField3();
    </script>
</apex:page>
Ravindar AdminRavindar Admin
@Shruti S, Please check this question, You may solve this question.

https://developer.salesforce.com/forums/ForumsMain?id=9060G000000Ua6zQAC
 
Ravindar AdminRavindar Admin
@Shruti S, If age__c field autofill from Date_of_birth__c field then even criteria meets, Field3__c not displaying.
Shruti SShruti S
Here is the working code - 
Apex Controller Extension
public class EmployeeExtension {
    public EmployeeExtension( ApexPages.StandardController controller ) {
        
    }
    
    @RemoteAction
    public static Integer calculateAge( String dateOfBirth ) {
        Date dob = Date.parse( dateOfBirth );
        Integer age;

        if( Date.today().month() > dob.month() ) {
            age = Date.today().year() - dob.year();
        }
        else if( 
            Date.today().month() == dob.month() && 
            Date.today().day() >= dob.day() 
        ) {
            age = Date.today().year() - dob.year();
        }
        else {
            age = Date.today().year() - dob.year() - 1 ;
        }
        
        return age;
    }
}

Visualforce
<apex:page id="page" standardController="Employee__c" extensions="EmployeeExtension">
    <apex:form id="form">
        <apex:pageBlock id="pgblk" mode="edit" title="Employee Edit">
            <apex:pageBlockSection id="pgblksec" title="Information" columns="2">
                <apex:inputField id="inpFldGender" value="{!Employee__c.Gender__c}" onchange="displayField3()"></apex:inputField>
                <apex:inputField id="inpFldDateOfBirth" value="{!Employee__c.Date_of_Birth__c}" onchange="calculateAge()"></apex:inputField>
                <apex:inputField id="inpFldAge" value="{!Employee__c.Age__c}" onchange="displayField3()"></apex:inputField>
                <apex:inputField style="display:none" id="inpFld3" value="{!Employee__c.Field3__c}"></apex:inputField>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">
        var displayField3 = function() {
            var genderVal   = $( "[id*='inpFldGender']" ).val();
            var ageVal      = $( "[id*='inpFldAge']" ).val();
            
            if( genderVal === 'Female' && ageVal > 12 ) {
                $( "[id*='inpFld3']" ).show();
                $( "[for*='inpFld3']" ).show();
            }
            else {
                $( "[id*='inpFld3']" ).hide();
                $( "[for*='inpFld3']" ).hide();
            }
        };
        
        var calculateAge = function() {
            var dobVal   = $( "[id*='inpFldDateOfBirth']" ).val();
            
            EmployeeExtension.calculateAge(
                dobVal,
                function( result, event ) {
                    $( "[id*='inpFldAge']" ).val( result );
                    
                    displayField3();
                }
            );
        };
        
        displayField3();
    </script>
</apex:page>

Sorry for the late response, I hope this works.
This was selected as the best answer