Calculate Age using Javascript and Conditionally Display Field/Section Based on Age

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? We've got you covered! This can be easily 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'.

Screen_Shot_2019-09-20_at_11.57.04_AM.png

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

On to the fun part! It's time to modify the Javascript. It can be helpful to copy the code below into your favorite code editor and modify it there. JSFiddle is a great tool to use when working with smaller blocks of code. You will want to 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 towards 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. Voila! You can now see the code in action on 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;
}
Was this article helpful?
0 out of 2 found this helpful

Comments

0 comments

Please sign in to leave a comment.