[How to] Conditionally Display Additional Form Fields Based On Dropdown Selection

Hi Rob. Can this script be modified to change either the 2nd drop down (or values inside of dropdown) depending upon the answer to the 1st drop down. To be clearer, my use case requires that the first drop down which contains a list of cities will determine the second drop down, which has a list of available agents within the selected city. Hope this makes sense! Thanks so much!

Hi @Rob I have a problem with this code. What I’m trying to do is if people say “Soy profesional de la salud mental” ("#soy_profesional_de_la_salud_mental") yes (#sí) don’t show an extra field. But if they answer no (#no) to show an extra field (Por_favor_cuentanos_por_qué_te_interesa_Psious).

I added the Javascript and when I test it and select “no” it creates a spacing but it’s blank.

Landing:
https://app.unbounce.com/2606601/variants/169916261/edit
Published URL as a test:
http://unbouncepages.com/cliente-directo/

Thanks

I’ve noticed that the ‘State/Province’ example will cause form submission issues with newer Unbounce pages (newer pages use HTML 5 validation and the form structure is slightly different), so I wrote little fix.

Here’s the script I used for anyone who’s interested 🙂

Be sure to modify the variable values.

<script>
/*
Unbounce Community :: Tips & Scripts :: Conditional State/ Province Form Field Based on Dropdown 
TS:0002-04-060
***********************
Do not remove this section. It helps our team track useage of external workarounds.
*/  
  
  // Conditional Reveal state/province field based on selection of the country dropdown
  // Make sure the "state" field is placed after the country dropdown. Place the province field after the state field
  
  $(document).ready(function(){(function(){
  var submitBtn = $("#lp-pom-button-171"); // Add ID of Submit Button
  var field = $("#Country");  // Add ID of Dropdown field
  var provinceFld = ("Province");  // Add ID of Province field (exclude #)
  var stateFld = ("State");  // Add ID of Province field (exclude #)
  
  var conField01 = field.parent().next();
  var conField02 = conField01.next();
  
  var topPos = conField01.position().top;
  conField02.css({top: topPos});        
  
  conField01.css("display", "none");
  conField02.css("display", "none");
  
  var fieldHeight = conField01.height();
  var space = fieldHeight*2+37;
  var halfSpace = space/2;
  
  var moreFields = $(conField02).nextAll();
  moreFields.animate({top: "-=" + space},0); 
  
  var i = true;
  $(field).change(function() {
     if ($(this).val() == "United States") {
      conField01.fadeIn("slow");
      conField02.fadeOut("slow");
      document.getElementById(stateFld).setAttribute("required", "");
      document.getElementById(provinceFld).removeAttribute("required");
      module.lp.form.data.validationMessages.State = "Please select a State"
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else if ($(this).val() == "Canada") {
      conField01.fadeOut("slow");        
      conField02.fadeIn("slow");
      document.getElementById(provinceFld).setAttribute("required", "");
	  document.getElementById(stateFld).removeAttribute("required");
      module.lp.form.data.validationMessages.Province = "Please select a Province"
      if (i) {
        fieldAdjust();
        i = false;
      }
    } else {
      i = true;
      conField01.fadeOut("slow");
      conField02.fadeOut("slow");
      document.getElementById(provinceFld).removeAttribute("required");
	  document.getElementById(stateFld).removeAttribute("required");
      if (conField01.css('display') == 'block' || conField02.css('display') == 'block') {
        moreFields.animate({top: "-=" + halfSpace}, 600);
        submitBtn.animate({top: "-=" + halfSpace}, 600);
      }  
    }
  });
  var fieldAdjust = function() {
    moreFields.animate({top: "+=" + halfSpace}, 600);
    submitBtn.animate({top: "+=" + halfSpace}, 600);
  }
})();   });
</script>

i cant do it 😑

It’s because you’re requiring an input on each campus dropdown but, the user is only able to make a selection on the campus dropdown that is currently showing based on the degree selection input. I confirmed that’s the case by selecting a campus for each option in the degree selection input. You’ll have to make those individual dropdowns not required. From there you can just not require the input at all, try to make it look to users like it’s required, but do the validation or you could create your own custom validation that fires on the button click.

Hey Ana, I’m having the same problem right now. Could you solved this?

Thanks!

Hey guys!

First off, absolutely love the code and the work you guys are putting in to make this work. Really makes the flash stand out and look amazing!

I made a video in my Unbounce playlist showing how to set this up…

Here is the link for those who want to see how to do this from start to finish:

Let me know if you have any questions!!

Ivan

@Rob

Hi Rob,

Thank you for the script! However, I would like to create a dynamic form with the below behavior:
When someone clicks on the dropdown and select the first choice> 1 field is appearing below, and when someone chooses the second choice on the primary dropdown> 3 fields appear below and not just 1 as the script is now. Is it possible to create something like this?

Thanks in advance,
Carin

Hi @Hristian,

Thanks for your answer. Maybe you can help me with the JS, here is the form logic that I want it to be. Attached screenshots of the form. The logic of the form should be:

1. A person choose between “Student” to “Industry Profesional” in the drop-down field (all the below fields should be hidden)
2. If the person clicks on “Student”, below should be the drop-down field is shown - “Experience” and that’s it.
3. If the person clicks on “Industry Profesional”, below should be the 3 fields shown - “Company Name”, “Job Title” and dropdown “Industrial Experience”.

Hope I made it clear enough and you can help me 🙂

Thank you!
Carin

Hi @stevep,

Yes, you can have validation for fields that are visible and remove the validation for when the fields are not visible.

1. First, you’ll need to remove the validation for the fields you are not showing. Here is an example for a checkbox field:

   const removeValidation = fields => { fields.forEach(element => { let items = document.getElementsByName(element); item = items[0]; item.removeAttribute('required'); item.removeAttribute('data-required'); item.type === 'checkbox' ? item.checked = false : item.value = ''; });

2. Once they are shown, you’ll need to add the validation back in. Something like:

   const setValidation = field => { const items = document.getElementsByName(field); item = items[0]; item.setAttribute('required', 'required'); item.setAttribute('data-required', 'data-required'); };

The above is just an example and you’ll need to write up the actual script but this should point you in the right direction.

Best,
Hristian

Hi! I´m not a JS developer. I managed to use the following script. Can you help me add the validation script?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script>
  /*
Unbounce Community :: Tips & Scripts :: Conditional State/ Province Form Field Based on Dropdown 
TS:0002-04-060
***********************
Do not remove this section. It helps our team track useage of external workarounds.

La documentación de este script está en: 
https://community.unbounce.com/t/how-to-conditionally-display-additional-form-fields-based-on-dropdown-selection/4430/22

https://gist.github.com/RobertCam/0be9efb09a091e1880ffeb5edadf2d1a

*/ 
(function(){
  //ID of Submit Button
  var submitBtn = $("#lp-pom-button-142"); 
  
  //ID of dropdown field
  var field = $("#provincia"); //escribir el ID con el #
  
  // Number of fields to show/hide with dropdown
  var count = 25;
  
  // Adjust to fine tune placement of other form fields
  var space = 27;
  
  // Add the ID of the containing element (box) of your form if one exists
  // Leave as "" if there is no box containing the form.
  var box = "lp-pom-box-388";
  
  
  // DO NOT EDIT CODE BELOW
  var conFields = field.parent().nextAll().slice(0, +count);
  var moreFields = field.parent().nextAll().slice(count);
  var topPos = conFields.first().position().top;
  
  // function to add the heights of all fields selected 
  $(conFields).each(function() {
    $(this).css({top: topPos}); 
    var height = $(this).outerHeight(true);
    space = space += height;
  });
  // hide fields
  conFields.css("display", "none");
  // position other form fields
  $(moreFields).each(function() {
    $(this).animate({top: "-=" + space},0);
  });
  
  // function to show/hide fields
  var z = true;
  var box = $(box);
  $(field).change(function() {
    
    // adjust position of fields
    var fieldAdjust = function(h, dir) {
      if (dir == "up") {
        $(moreFields).each(function() {
          $(this).animate({top: "+=" + (h+5)}, 600)
        });
        submitBtn.animate({top: "+=" + (h+5)}, 600);
        if (box != "") {
          box.animate({height: "+=" + (h+5)}, 600);
        }
      } else if (dir == "down") {
        $(moreFields).each(function() {
          $(this).animate({top: "-=" + (h+5)}, 600)
        });
        submitBtn.animate({top: "-=" + (h+5)}, 600);
        if (box != "") {
         box.animate({height: "-=" + (h+5)}, 600);
        }
      }
    }  
    var fieldGroup = range(0, count);
    if ((this.selectedIndex - 1)in fieldGroup) {
      var revealNum = this.selectedIndex-1;
    } else {
      var revealNum = -1;
    }
    var revealField = conFields.get(revealNum);
    var otherFields = conFields.not(revealField);
    var fieldHeight = $(revealField).outerHeight(true);
    if (revealNum in fieldGroup) { 
      $(revealField).fadeIn("slow");
      $(otherFields).fadeOut("slow");
      if (z) {
        fieldAdjust(fieldHeight,"up");
        z = false;
      }
    } else {
      $(revealField).fadeOut("slow");
      $(otherFields).fadeOut("slow");
      fieldAdjust(fieldHeight, "down");
      z = true;
    }
    
  });
  function range(start, end) {
    var array = new Array();
    for(var i = start; i < end; i++) {
        array.push(i);
    }
    return array;
  }
})();
</script>