rob
Administrator
Conditional drop downs are when you select one option in a first drop down list, and this selection alters the options available in a second list.
This how to is for Fabrik 1.0.4 +
lets say we have 2 drop downs who's ids are "cascadingexample___country" and "cascadingexample___town" -
"cascadingexample___country" has two options "france" and "england"
When these options are changed you need to populate "cascadingexample___town" with either "paris, toulouse, bordeaux" when france is selected or "london, liverpool, birmingham" when "england" is selected.
So we edit our country drop down list element, select the javascript tab and press "Add Javascript action to element " to a javascript event to it.
We want the event to run each time the country lists changes - so select "onchange" for the event and enter this in the code section:
(you can remove all the comments from the code if you like - there are here just to explain what's going on )
Now loading your form and selecting "france" should load in the french towns, and selecting "england" will load in the english towns.
hth
Rob
This how to is for Fabrik 1.0.4 +
lets say we have 2 drop downs who's ids are "cascadingexample___country" and "cascadingexample___town" -
"cascadingexample___country" has two options "france" and "england"
When these options are changed you need to populate "cascadingexample___town" with either "paris, toulouse, bordeaux" when france is selected or "london, liverpool, birmingham" when "england" is selected.
So we edit our country drop down list element, select the javascript tab and press "Add Javascript action to element " to a javascript event to it.
We want the event to run each time the country lists changes - so select "onchange" for the event and enter this in the code section:
(you can remove all the comments from the code if you like - there are here just to explain what's going on )
Code:
//lets build our data set, for each value in the first drop down (e.g. 'france' and 'england' we create an array of objects
//each object (the things encased in {} brackets, has a value and a label - these correspond to the option's value and label that we will be
//inserting into the second drop down
var data = {
'france':[{'value':'1','label':'paris'},{'value':'2','label':'toulouse'},{'value':'3','label':'bordueaux'}],
'england':[{'value':'1','label':'london'},{'value':'2','label':'birmingham'},{'value':'3','label':'liverpool'}]
};
// lets assign the town drop down to a variable 'towndd'
var towndd = $('cascadingexample___town');
//now lets empty it of its current options
towndd.empty();
//'this' refers to the drop down element you are adding the javascript to
//- in this case its the country drop down list.
// we then get the current selected value from the drop down list
var country = this.getValue();
// now we can get the array of towns from our data set
var towns = data[country];
//for each town we create a new 'option' element, assigning it a value and label, and injecting it inside the town drop down list
towns.each(function(town){
new Element('option', {value:town.value}).appendText(town.label).injectInside(towndd);
});Now loading your form and selecting "france" should load in the french towns, and selecting "england" will load in the english towns.
hth
Rob
