Cascading Form

Change the options of a dropdown based on a previous selection.

Code Level

intermediate

Published

 

Example Description

This example demonstrates change the options of a dropdown based on a previous selection.

Example Code

How We Built It

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 Corvid.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER