FAQs

How to build a dynamic dropdown in Chronoforms 8

A dynamic dropdown is a select field which will update it's options when another field changes, in this tutorial we will show how to do this in Chronoforms8

First, we need to setup an Event Trigger in the field which will trigger the change of options:

We setup a trigger named "reloadoptions" when the "Value Changes" of our field

Then in our Dropdown settings, we need to setup an Advanced Listener:

The trigger name should be the one we setup before "reloadoptions", the Action should be "Load Options" and the Action paremeters is the alias of the page which will supply the new options, in our case we have a page called "options"

Now we need to prepare the "options" page to receive the Load Options request and return the results in the correct format:

We added a New Page and set the alias to "options", and the Page Group to "options", it's important to change the page group to something unique in the form so that the page can be accessed independently.

inside the options page Load event we have a PHP action to return the results:

In our case we have a PHP script to return a random list of capital cities:

$cities = [
    "New York", "London", "Tokyo", "Paris", "Sydney",
    "Toronto", "Berlin", "Rome", "Shanghai", "Istanbul",
    "Mumbai", "São Paulo", "Mexico City", "Cape Town", "Buenos Aires",
    "Moscow", "Singapore", "Los Angeles", "Bangkok", "Jakarta"
];

// Shuffle the cities array to randomize order
shuffle($cities);

// Extract 5 random cities
$randomCities = array_slice($cities, 0, 5);

// Create an array of key-value pairs
$randomItems = [];
foreach ($randomCities as $city) {
    $randomItems[] = [
        'text' => $city,
        'value' => $city
    ];
}

// Output the result as JSON
echo json_encode($randomItems, JSON_PRETTY_PRINT);

note that the list is Json encoded and it's an array of arrays, each inner array is an option and has 2 keys, "text" for the option text, and "value" for the option's value

That's all, now when the triggering field changes (on Value Changes) the dropdown will receive the trigger and call the "options" page and get the updated list of options.