Difference between revisions of "How to toggle custom fields based on the category selection in the Advanced Search Module"
From JReviews Documentation
(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>