How to toggle custom fields based on the category selection in the Advanced Search Module
From JReviews Documentation
Revision as of 13:39, 10 February 2015 by Jreviews (Talk | contribs) (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...")
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>