Skip to main content
Contact Support

Calculate Age using Javascript and Conditionally Display Field-Section Base

Ryan J.
Updated

You may find yourself needing to conditionally display form fields or a form section based on the age of your end-user. For example, let's say that you are collecting student contact Information and need to display a parent contact information section if the student is a minor.

If you are already collecting the user's age in Salesforce, you can show/hide specific form fields using the Formstack for Salesforce Rules Feature. But what if you are only collecting your user's birthdate or want to hide a whole form section? This can be accomplished by using the Javascript below: 

 

Decide What Field(s) and/or Section(s) to Hide and When to Hide Them

In the example in this article, we are hiding the Student Signature section and displaying the Parent/Guardian Information section if the student is a minor. If the student is over 18 years old, we are hiding the Parent/Guardian Information section and displaying the Student Signature section. We will load the form with the Parent/Guardian Information section hidden by default.

 

Get Field/Section Ids

You will need to grab the ids for the birthdate field and any field(s)/section(s) you are displaying conditionally.

To get the id for the field/section you're working with, right-click the field and click 'Inspect'.

In this example we have the following ids:

#Contact\\.Birthdate 

We will use this field to calculate the student's age

#ffSection1

#ffSection2

These are the sections that we are displaying based on the student's age. #ffsection1 is the Parent/Guardian section and #ffsection2 is the Student section.

 

Modify Code

It can be helpful to copy the code below into a code editor to modify. JSFiddle is a great tool to use when working with smaller blocks of code. Make the following changes to your code:

  1. Replace '#Contact\\.Birthdate' with the id of your birthdate field.
  2. In the displayBasedOnAge() function, change 18 to the minimum age requirement, if necessary. You will want to make this change to both if statements in the function.
  3. Replace the first occurrence of '#ffSection1' with the id of the field/section you want to hide by default.
  4. Replace all other occurrences of '#ffSection1' with the id of the field/section that you want to display when the minimum age requirement is met.
  5. Replace all occurrences of '#ffSection2' with the id of the field/section that you want to display when the minimum age requirement is NOT met.
  6. When replacing the ids used in the example code, remember to include the quotation marks and hashtag (#). Also, anywhere in the id where there is a period, place \\ in front of the period. For example, if you're going to use a custom field called Student Birhtday on your custom Student object, you're id will look something like this: '#Student__c\\.Student_Birthday__c'

 

Add Modified Code to Your Form

Once you have modified your Javascript code, you are ready to place it in your form. 

While editing your form, click on the Form Settings button. Here, if you scroll down toward the bottom you can see a section called Javascript Code. Place your modified Javascript in the Javascript editor. When done, click the 'Close' button. Once the draft saves, click the blue 'Publish Draft' button. The code will then be used in your live form.

 

function FF_OnAfterRender() {
 var age;
 // hide the parent/guardian info section by default
 fs('#ffSection1').hide();
 // add change event to birthdate field and call function to display section(s)/field(s)
 fs('#Contact\\.Birthdate').change(function() {
 calculateAge();
 displayBasedOnAge();
 })

function calculateAge() {

// get today's date
 var today = new Date();
 // separate current date values
 var currentYear = today.getFullYear();
 var currentMonth = today.getMonth();
 var currentDate = today.getDate();
 // add 1 to currentMonth since values are 0 - 11
 currentMonth++;

// get birthdate
 var birthday = fs('#Contact\\.Birthdate').val();
 // separate birthdate values
 var birthyear = birthday.substring(6, 10);
 var birthmonth = birthday.substring(0, 2);
 var birthdate = birthday.substring(3, 5);

// format dates by removing preceeding 0 from birthmonth and birthdate, if needed
 if (birthmonth.substring(0, 1) == 0) {
 birthmonth = birthmonth.substring(1, 2);
 }
 if (birthdate.substring(0, 1) == 0) {
 birthdate = birthdate.substring(1, 2);
 }

// calculate age based on year
 age = currentYear - birthyear;

//check if birthday has occurred this year
 // check if birthmonth is greater than current month
 if (birthmonth > currentMonth) {
 age--;
 }
 // if birthmonth is the current month, check if birthdate is greater than current date
 else if (birthmonth == currentMonth && birthdate > currentDate) {
 age--;
 } else {
 age = age;
 }


 return age;
 }

function displayBasedOnAge() {
 // hide adult signature sections and show minor signature sections
 if (age < 18) {
 fs('#ffSection1').show();
 fs('#ffSection2').hide();
 }
 // hide minor signature sections and show adult signature sections
 else if (age >= 18) {
 fs('#ffSection2').show();
 fs('#ffSection1').hide();
 }
 }


 return true;
}

Related articles