Cascading Form

This example demonstrates how to build a cascading form.

Cascading elements help users quickly refine their input while filling out fields in submission and search forms. Cascading is the operation of automatically populating a form element with options based on a previous selection.

Here the first dropdown element asks a user to select a country. The second dropdown element is populated dynamically with the states located in the selected country, or it’s disabled for countries without states.

We implement the cascade using the onChange event of the first dropdown. The state information is imported from the states.js file in the site’s Public section. In this example, the only countries with state or province information are the United States and Canada.

Next Steps

1. Open this example in the Editor to work with the template.

2. Publish the site.

3. Learn how to work with examples in Velo.