populate dropdown based on first dropdown.

First of all: thanks for ChronoForms!
I'm on a steep learning curve here, but absolutely love it!

Hoping someone can help me out, because I'm really stuck here.
I really did try to find the answers myself, but my head is starting to overflow with all the info found on the website!

What I need is a really simple explanatin (kinda step by step, wizard mode, tell it to me slowly :wink: )

Situation:
I've build (in wizard mode) a form with two dropboxes on it:
fieldnames:'location' and 'course'.

location is (in wizard mode) filled with 'Options':
location1='name location1'
location2='name location2'
location3='name location3'

I would like to populate the second dropbox with values based on the input chosen in the first dropbox.

For instance:
If people choose 'location1' in dropbox 'location', I would like dropbox 'courses' to have the 'Options':
location1_course1= 'coursename1'
location1_course2= 'coursename2'
location1_course3= 'coursename3'

If people choose 'location2' in dropbox 'location', I would like dropbox 'courses' to have the 'Options':
location2_course1= 'coursename1'
location2_course2= 'coursename2'
location2_course3= 'coursename3'
location2_course4= 'coursename4'
location2_course5= 'coursename5'
etc.

How do I do that?

I do apologize if by asking this question I have offended anyone with my absolute ignorance!

Pettrik

Hi pettrik,

This is what we call a 'double drop-down' and there are several ways to make it work. Please see this FAQ for a start - scroll down to the later part for double-drop-downs.

Bob

Thanks for the pointer Bob.

= = = = = = = = = = = = = = =
Simple double drop-down
A double drop-down is a pair of linked select drop-downs (usually these are select boxes rather than check box or radio button groups). When the first drop-down is changed the option list in the second drop-down changes to match. For example, the first drop-down is a list of states, and the second drop-down shows a list of the counties/regions in the state.
ChronoForms has a built-in Dynamic Dropdown action in the Power Fields group. In the simplest use you can ignore the two AJAX boxes and enter your lists of options directly into the Extra Options Extension box. The format is to add one source value and the matching list of value+name pairs on each line:

state_1:region_1a=Region A,region_1b=Region B,regions_1c=Region C
state_2:region_2x=Region X,region_2y=Region Y

Note: you need to add entries in the Field ID box of each of the seelct drop-down elements and you should put an entry like ? in the Show Empty box of the first element.
= = = = = = = = = = = = = = =

I feel so stupid, but I really have to ask:
- Where can I find the built-in Dynamic Dropdown action? Where can I find the Power Fields group?
- I need to add entrie in the Field ID box of each of the select drop-down elements. Do these have to be the same?

Still feeling a little stupid, but also very happy!

Did some more searching and found it! Thanks Bob for pointing me in the right direction!

To answer my own questions:

- Where can I find the built-in Dynamic Dropdown action? Where can I find the Power Fields group?

It's an event in the wizard, not an element. The Power Fiels group is located under events in the wizard.

- I need to add entries in the Field ID box of each of the select drop-down elements. Do these have to be the same?
No stupid! ( :wink: ) You add an entry in the Field ID box of both you select drop-down elements. Use these entries to identify the two drop-down elements in the Dynamic Dropdown action.

Wooohoooo! Happy! 😀

I've been reading this article over and over. I am still not getting it 😟
I am using 4.0 RC3.5.2.4 and I can't seem to get the second dropdown to work. I am lost on what to put in the ID
I am trying to create a dropdown for Residential and Commercial and populate 1,2,3,4 and 5 bedrooms for Residential and 1, 2, and 3 Stories for Commercial.
I appreciate any help.

I had to "fight" with the same problem to build a Simple Double Dropdown without Ajax (ChronoForms V4 RC3.0).

Finally I've solved it this way, maybe it helps others to better understand the process:

In the wizard edit, tab "Preview" I added two dropdown boxes from the "Basic Elements".
In the general tab, the first with field name and field id = "source_1" (do they have to be the same btw?).
In the "Options" field, I've got two selection pairs:
selection_1=Selection 1
selection_2=Selection 2
I did not alter anything in the other tabs (as for example "Dynamic Data").

The second drop down box from the "Basic Elements" has field name and field id = "target_1".
The "Options" field is empty as the options are generated with the "Dynamic Drop Down"-Action in the tab "Events".
Don't forget to go to the "Dynamic Data"-tab here and set it to "yes".

Finally I added the "Dynamic Drop Down"-Action (see the "Events"-tab of the Wizard) and placed it above the entry of "Show html".
Source Dropdown ID = "source_1" (as the field id of the first dropdown box),
Target Dropdown ID = "target_1" (as the field id of the second dropdown box).

The "Extra options extension" I filled with
selection_1:section_1a=Value1,section_1b=Value2,section_1c=Value3,section_1d=Value4,section_1e=Value5
selection_2:section_2a=Value1,section_2b=Value2,section_2c=Value3,section_2d=Value4,section_2e=Value5

Please be aware that "selection_1" and "selection_2" are exactly the entries of the Options field of the first dropdown.

For me it worked like this -
good luck for you! :-)
Anja

Anja...
Thank U Thank U Thank U!!!!!
It is working perfectly. I struggled a bit until I added both the Drop Down action AND the show html action. I can't thank you enough. And thank you ChronoForms!

Thanks Anja, your explanation was perfect. Easy to follow with the result I needed🙂

Hi Anja,

Thank you, I've added your post into the FAQs.

Bob

Could you upload the backup form, because i follow this steps and got this error

$('source_1').addEvent('change', function(){


Regards

Hi colemjosel,

Where exactly do you see that? Please post a link to the form so I can take a quick look.

Bob

Sorry if I'm boring you to re-opening this post.
First of all, thank you Anja for the step-by-step help.
I would like to know a way to check and control those 2 dropdown fields: following your example, does a way exist to reset (to blank) the second Dropdown field if the user, once he clicked on Section2, clicks again on Section1 ?
Maybe Javascript?
If so, are there some examples I can follow?

My needs: if user clicks on Choose1, he can see the second dropdown with Sub1, Sub2, Sub3. But if he clicks on Choose2, he can see the second dropdown with Sub4, Sub5, Sub6. If he change again to Choose1 the second dropdown has to switch to related Subs.

I hope I was clear and sorry for my bad english.
Thank you very much
Regards,

Hi marcouzens,

As far as I know your description is exactly how it works?

Do you see any JavaScript errors on your page that might be causing a problem?

Bob

Hi Bob,
I try to be more clear.

The situation:
1. user clicks on Choose1, he can see the second dropdown with Sub1, Sub2, Sub3.
2. he clicks on Choose2, he can see the second dropdown with Sub4, Sub5, Sub6.
3. if user clicks again on Choose1, the second dropdown keeps with Sub4, Sub5, Sub6 (The choose2 releted subs).

What I need is:
If he change again to Choose1 the second dropdown has to switch to related Subs.

Is this possible?
In few words, I would like to know how I can reproduce this: http://demos.chronoengine.com/index.php/chronoforms/dynamic-dropdown

Thanks

Hi marcozeus,

As I said, that's how the double drop-down works. Not much more I can say without more information about the problems with your drop-down.

Bob

Hi Bob,
forgive me: maybe I put something wrong.
Now all works fine.
Thank you very much and sorry again..