Ajax Dynamic Cascade Drop-Downs

Introduction

In Joget, dynamic cascading drop-down lists are a powerful feature used to update select box, radio button, or checkbox options dynamically based on the value of another field. This enables creating forms that respond in real time, making data entry faster and more intuitive. By implementing AJAX, the dynamic cascading drop-downs become even more efficient, improving performance when dealing with large datasets or multiple field dependencies.

This article will guide you through the setup of dynamic cascading drop-down lists in Joget, the advantages of using AJAX for cascade options, and how to enable these features easily in your forms for single fields.

To see a guide on customizing dynamic cascading drop-down lists for multiple form field values, see Multiple Dynamic Cascading Drop-Down List after going through this guide.

Dynamic cascading drop-down list

Joget Form Builder allows the creation of dynamic cascading drop-down lists that change the options of a select box, radio button, or checkbox based on another form's field value. 

In the example shown below, the Category Select box is based on the type of leave designated in the Type of Leave field:

• When Paid is selected in the Type Of Leave.
  
• When Unpaid is selected in the Type Of Leave.
  

To configure your form as in the example above, follow the steps below:

1. Configure the Type Of Leave select box options.
   
2. Now, configure the Category select box options and use the Grouping field to associate them to the Type of leave form element.
   
3. In Advanced Options > Dependency, input the Field ID of the Type select box.
   
4. Apply your changes and preview your form.

5. It is also possible to populate Options through the use of Options Data Store. For example, the form table below stores all categories.
   

6. In the Category properties, go to Load Data From and choose Form Data. Then go to the Configure Form tab and choose the form as shown in the example below.
   

Enable AJAX cascading

Joget supports AJAX loading of cascade options. This helps improve the performance when you have many options and only want a few options related to your controlling field to be loaded and shown. Joget has also added support for AJAX Cascading for the Select Box / Radio button / Checkbox. This feature helps to improve the performance when you have a huge number of options and when you only want a few options shown, which are related to your controlling field being loaded and shown.

Turning on with just a flick of a switch

To turn AJAX loading on, check the Use AJAX for cascade options? checkbox when you are configuring the Options Data Store.

This property option is currently available in:

• Bean Shell Options Data Store
• Form Data Options
• User Options

Related documentation

• Check Box
  
• Multi Select Box
• Radio
• Select Box