iFormBuilder JavaScript Tips & Tricks

Table of Contents

• What is a Multi-Select element?
• How do I dynamically populate a Multi-Select?
• Download the Form Package

Also, check out:

• How do I pre-populate a Multi-Select? 

What is a Multi-Select element?

The Multi-Select element is similar to the Pick List element, except users may select multiple items from the assigned option list.

Click here for more information on how to add a Multi-Select element to your form. 

How do I dynamically populate a Multi-Select?

To populate a Multi-Select element based on a previous element, please follow the instructions below.

STEP 1. From inside your form, add a Pick List element with a data column name of department. This element will be used to decide which options will be dynamically populated in your Multi-Select element.

PLEASE NOTE: The options in this Pick List example will be:

• Development
• Marketing
• Customer Success

STEP 2. Add the Multi-Select element to your form. 

PLEASE NOTE: In this example, the key values of the options in this Multi-Select will be:

• amol
• keith
• elaheh
• liza
• penny
• mark

STEP 3. In the Dynamic Value field of the Multi-Select element, put the following JavaScript:

if (ZCDisplayKey_department == "development"){["amol","keith"]} else if(ZCDisplayKey_department == "marketing"){["elaheh","liza"]} else if (ZCDisplayKey_department == "customer_success"){["penny","mark"]}

This JavaScript is telling the element that if development is chosen from the Pick List above then populate the Multi-Select with Amol and Keith. If the user chooses marketing, populate with Elaheh and Liza, and if customer success is chosen, populate with Penny and Mark.

Click here for more information on using ZCDisplayKey.

STEP 4. Save your form.

STEP 5. Test the functionality on your device.

PLEASE NOTE: If you want to get extra fancy with it, you can use Dynamic Label to include the name of the department chosen in the Department Pick List. The below form package will include this functionality.

Download the form package below to use as an example.