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>