Difference between revisions of "How to toggle custom fields based on the category selection in the Advanced Search Module"

<script>
// Bind the change event for the category select list
 
jQuery('select[name="data[categories]"]').on('change',function() {            
 
   var form = jQuery(this).closest('form');
 
   // Get the selected cat id
   var selected = jQuery(this).val();        
 
   // Get all the input objects that will be toggled based on the category selected
 
   var field1 = form.find('.jr_field1').val('').closest('.jrFieldDiv'),
       field2 = form.find('.jr_field2').val('').closest('.jrFieldDiv'),
       field3 = form.find('.jr_field3').val('').closest('.jrFieldDiv');
 
   // Only show field1 when Cat ID 1 is selected
 
   if(selected == 1) {       
      field1.hide();
      field2.show();
      field3.hide();
   }
 
   // Only show field2 when Cat ID 2 is selected
 
   else if(selected == 2) {       
      field1.hide();
      field2.show();
      field3.hide();
   }
 
   // Only show field3 when Cat ID 3 is selected
 
   else if(selected == 3) {       
      field1.hide();
      field2.hide();
      field3.show();
   }
});
</script>