Cascading Form

Forms

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

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

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.

Example Code

arrow&v

Example Demonstrates

Coding with Dropdown

Dropdown.onChange

Dropdown

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode