+ Start a Discussion
Ravindar AdminRavindar Admin 

How to display the field using javascript?

I have 4 fields: 1)Gender__c 2) Date_of_birth__c 3) Age__c 4) Field4__c
My condition is: If (Gender__c='Female' & Age__c>12) Then display the field4__c.

I tried with the following code, It is displaying When I select the gender='female' & if I enter the value manually which meets the condition: age>12 .

I wrote another Javascript with @RemoteAction to update Age__c when I select the Date_of_birth__c.

It is not displaying the field4__c, If the Age__c is updated from date_of_birth__c.

Code is:


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script type="text/javascript">
var displayField4 = function() {
 var genderVal = $( "[id*='inpFldGender']" ).val();
var ageVal = $( "[id*='inpFldAge']" ).val();
 if( genderVal === 'Female' && ageVal > 12 ) {
$( "[id*='inpFld4']" ).show();
$( "[for*='inpFld4']" ).show();
 }
else {
 $( "[id*='inpFld4']" ).hide();
$( "[for*='inpFld4']" ).hide();
}
};
 displayField4();
 </script>
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>

I hope this works. If you have any queries, feel free to come back.

All Answers

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>

I hope this works. If you have any queries, feel free to come back.
This was selected as the best answer
Ravindar AdminRavindar Admin
@Shruti S, It is working fine. Thank you so much.