We have seen the need to have logic to determine more than one location drop down on a form the use the hipaa_forms_office_location Class.  The issue is that both fields can not have the class assigned.  The example below is for 2 states.  When each state is chosen, one of two dropdown fields will display.  


If you are using a Drop Down to decide between Ohio and Kentucky (this example):


Three fields are needed on your form (Form 2)

1.  Drop down with 2 states (Ohio, Kentucky) (Field 5) Conditional logic for Ohio/Kentucky Drop Downs

2.  Drop down with Ohio Locations (Field 6)  This is the default with Custom CSS Class  = hipaa_forms_office_location 

3.  Drop down with Kentucky Locations  (Field 7)  Custom CSS Class = dummy


Create HTML (Standard Field) anywhere on your form with this code:


<script>jQuery(document).on('change', '#input_2_5', function() {

    var stateName = jQuery(this).val();

    if(stateName === 'Ohio') {

        jQuery('#field_2_6').removeClass('dummy').addClass('hipaa_forms_office_location');

        jQuery('#field_2_7').removeClass('hipaa_forms_office_location').addClass('dummy');

    } else if(stateName === 'Kentucky') {

        jQuery('#field_2_7').removeClass('dummy').addClass('hipaa_forms_office_location');

        jQuery('#field_2_6').removeClass('hipaa_forms_office_location').addClass('dummy');

    }

});</script>


If you are using a Radio Button to decide between Ohio and Kentucky, this is the needed code:



Three fields are needed on your form (Form 2) 

1.  Radio Button with 2 states (Ohio, Kentucky) (Field 5) No default choice and Conditional logic for 2 Drop Downs 

2.  Drop down with Ohio Locations (Field 6)  

3.  Drop down with Kentucky locations  (Field 7)


Create HTML (Standard Field) anywhere on your form with this code:



<script>jQuery(document).on('change', 'input[name=input_5]', function() {

    console.log('hello');

    if(jQuery('#choice_2_5_0').prop('checked') === true)   {

        jQuery('#field_2_6').removeClass('dummy').addClass('hipaa_forms_office_location');

        jQuery('#field_2_7').removeClass('hipaa_forms_office_location').addClass('dummy');

    } else if(jQuery('#choice_2_5_1').prop('checked')  === true)  {

        jQuery('#field_2_7').removeClass('dummy').addClass('hipaa_forms_office_location');

        jQuery('#field_2_6').removeClass('hipaa_forms_office_location').addClass('dummy');

    }

});</script>