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

From JReviews Documentation
Jump to: navigation, search
(Created page with "Add the following code at the bottom of your adv. search module theme file and modify according to your specific category IDs and field names. <source lang="javascript"> <script...")
 
Line 16: Line 16:
 
   var field1 = form.find('.jr_field1'),
 
   var field1 = form.find('.jr_field1'),
 
       field2 = form.find('.jr_field2'),
 
       field2 = form.find('.jr_field2'),
       field3 = form.find('.jr_field3')
+
       field3 = form.find('.jr_field3');
 
          
 
          
 
   // Only show field1 when Cat ID 1 is selected
 
   // Only show field1 when Cat ID 1 is selected
Line 27: Line 27:
  
 
   // Only show field2 when Cat ID 2 is selected
 
   // Only show field2 when Cat ID 2 is selected
 
  
 
   else if(selected == 2) {       
 
   else if(selected == 2) {       
Line 37: Line 36:
  
 
   // Only show field3 when Cat ID 3 is selected
 
   // Only show field3 when Cat ID 3 is selected
 
  
 
   else if(selected == 3) {       
 
   else if(selected == 3) {       

Revision as of 13:39, 10 February 2015

Add the following code at the bottom of your adv. search module theme file and modify according to your specific category IDs and field names.

<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'),
       field2 = form.find('.jr_field2'),
       field3 = form.find('.jr_field3');
 
   // Only show field1 when Cat ID 1 is selected
 
   if(selected == 1) {       
      field1.val('').closest('.jrFieldDiv').show();
      field2.val('').closest('.jrFieldDiv').hide();
      field3.val('').closest('.jrFieldDiv').hide();
   }
 
   // Only show field2 when Cat ID 2 is selected
 
   else if(selected == 2) {       
      field1.val('').closest('.jrFieldDiv').hide();
      field2.val('').closest('.jrFieldDiv').show();
      field3.val('').closest('.jrFieldDiv').hide();
 
   }
 
   // Only show field3 when Cat ID 3 is selected
 
   else if(selected == 3) {       
      field1.val('').closest('.jrFieldDiv').hide();
      field2.val('').closest('.jrFieldDiv').hide();
      field3.val('').closest('.jrFieldDiv').show();
 
   }
});
</script>