Skip to main content

Fill Form Fields from Dropdown Component

Intro​

Dropdown menus are important for picking choices from a list. They grab information from a collection based on what the user picks, usually from a database or another source. For instance, if you're choosing a country in a form, the dropdown gets a list of countries. The one you choose fills in the form, making sure everything is right and making it easier for you. This way, websites can handle info well, making it easy for users to fill out forms.

In this video tutorial you will learn to to fetch the value from the collection on the basis of the dropdown component.

1. Create Reference Fields​

In your collection you would need refrence fields that share the same data. This data can be in the form of dropdown. When either of field data gets selected the related (reference) field will fill/show the same data.

To create a reference field, choose any field, say, Address. Then select the Reference option, the collection with data and the name of the field. Here you can choose the Multi-Select Option. Similarly, create another reference field of your choice.

DrapCode Builder Export Import Collection Item

2. Create an Event​

This event will tell the selected field to show similar data as its reference field. For this go to Events and choose Add Event. Then choose Form > Set Form Values by Dropdown.

DrapCode Builder Export Import Collection Item

3. Configure the Event​

The box appears where you can enter the - collection, the source and from page. Also, you can add select the field and the component.

DrapCode Builder Export Import Collection Item

4. Checking Component ID​

The Component in the above step will have IDs of all the fields. In case you want to cross-check the ID you can do so using the Inspect element of the respective field.

DrapCode Builder Export Import Collection Item

5. Bind Event to the Page Component​

Now you can go the Pages and drag-and-drop a component, say, Collection Form. Go to the field you have created as reference and right-click to open its Settings. Here in the event choose the event to bind it to.

DrapCode Builder Export Import Collection Item

6. Preview the Changes​

Click the Preview option on the upper-right-hand-side and you can view the changes. You can even Publish the project and do the same.

DrapCode Builder Export Import Collection Item

Conclusion​

One benefit of using dropdown menus for selecting choices in web forms is that it simplifies and speeds up the data entry process for users. By providing a pre-defined list of options, users can easily pick from a set of valid choices, reducing the likelihood of errors and ensuring accurate information input. This streamlined interaction enhances user experience and contributes to more efficient form filling on websites.