Dynamic Drop-down change form example
Within this tutorial we will provide an example on how you can use JavaScript to create your own Dynamic Dropdown scenario as an alternative approach besides the built-in Conditional Fields feature.
Procedure
In order to create a Dynamic Drop-down change form with RSForm! Pro follow these instructions:
- Add two drop-down fields to your form;
- Only the first dropdown will have the items added manually, as the second dropdown items are added by the script. This being said, your items within the first dropdown should be similar to your script. Example based on our scenario:
- |Please select a manufacturer
- Audi
- Dacia
- FIAT
- Peugeot
- SEAT
- Skoda
- Insert a script, similar to the one below in the JavaScript section from the Form Properties (backend > Components > RSForm!Pro > Manage Forms > your form > Properties > CSS and JavaScript > JavaScript);
- In order to trigger the function above, edit your first dropdown, switch to 'Attributes' tab and add the following snippet within the 'Additional Attributes' area (remember to replace name_of_the_second_dropdown with the exact name of your second dropdown element):
<script type="text/javascript"> function dynamic1(parent,child){ //You will have to adjust the parent arrays and the values assigned to them in order to insert the values of your choice var parent_array = new Array(); parent_array[''] = ['Please select a manufacturer']; parent_array['Audi'] = ['A3','A4','A5','A6','A8','Q5','Q7','S3','S4','S5','S6','S8','RS6']; parent_array['Dacia'] = ['Sandero','Logan']; parent_array['FIAT'] = ['Bravo','Punto','Grande Punto']; parent_array['Peugeot'] = ['207','308','407','607']; parent_array['SEAT'] = ['Ibiza','New Ibiza','Leon']; parent_array['Skoda'] = ['Fabia','Octavia Tour','Octavia 2','Superb']; var thechild = document.getElementById(child); thechild.options.length = 0; var parent_value = parent.options[parent.selectedIndex].value; if (!parent_array[parent_value]) parent_value = ''; thechild.options.length = parent_array[parent_value].length; for(var i=0;i<parent_array[parent_value].length;i++){ thechild.options[i].text = parent_array[parent_value][i]; thechild.options[i].value = parent_array[parent_value][i];} } </script>
onchange="dynamic1(this,'name_of_the_second_dropdown');"
47 persons found this article helpful.
You Should Also Read
How to create a multi-page form HOT |
Create Tabbed Forms HOT |
How to override front.css file in RSForm!Pro HOT |
Creating a Send me a copy scenario |