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

DOWNLOAD SAMPLE FORM

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);
    • <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>
  • 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):
    •   onchange="dynamic1(this,'name_of_the_second_dropdown');"

    47 persons found this article helpful.

    Was this article helpful?

    Yes No
    Sorry about that

    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