Dynamic form input fields based on user selection from select list

Bernard Rouzeau shared this question 2 years ago
Answered

Is it possible to create a dynamic form that loads different input field types (i.e. text, phone number, date range...) based on a selection from a select list component. For example, I have a form that says "Filter offers by:" and next to that title is a select list and an input field next to it; I would like that input data type to change based on what is selected from the select list next to it.

Best Answer
photo

Here's how to create a dynamic input form based on user selection:

1) Drag a Select List onto the Canvas and give it some values

2) Drag some Input Text Field widgets onto the Canvas

3) Select each Input Text Field and mark them as hidden in the Properties palette

4) Select all the Input Text Fields, right click on them, and click 'group in Dynamic Panel'

5) Select the Dynamic Panel and give it a vertical layout in the Properties palette

6) Select the Select List and create an "On Change" + "Show" event and have it show one of the Input Text Fields

7) Click on the "When" text next to the event and the Conditional Expression builder will appear. In the first open space in the expression, drag the Select List. Then, drag an '=' sign. Finally, in the open space that appears, type in the exact text of one the values in the select list

8) Click on the "Else" text and create another "On Change" + "Show event" and have it show another one of the Input Text Fields. Then repeat the steps for creating the condition, but change the text in the open space next to the '=' sign to be another value from the Select List. Lastly, repeat this again until all of the Input Text Fields have an event to be shown and a condition.

Comments (3)

photo
1

Hi, how to set value to a variable that detects which data has been selected.


and "on next page " what does it mean.

if you could explain it step by step , that would be great.

photo
1

Yes, i also dont know "how to add selected data in veriable"

photo
1

Here's how to create a dynamic input form based on user selection:

1) Drag a Select List onto the Canvas and give it some values

2) Drag some Input Text Field widgets onto the Canvas

3) Select each Input Text Field and mark them as hidden in the Properties palette

4) Select all the Input Text Fields, right click on them, and click 'group in Dynamic Panel'

5) Select the Dynamic Panel and give it a vertical layout in the Properties palette

6) Select the Select List and create an "On Change" + "Show" event and have it show one of the Input Text Fields

7) Click on the "When" text next to the event and the Conditional Expression builder will appear. In the first open space in the expression, drag the Select List. Then, drag an '=' sign. Finally, in the open space that appears, type in the exact text of one the values in the select list

8) Click on the "Else" text and create another "On Change" + "Show event" and have it show another one of the Input Text Fields. Then repeat the steps for creating the condition, but change the text in the open space next to the '=' sign to be another value from the Select List. Lastly, repeat this again until all of the Input Text Fields have an event to be shown and a condition.