A search field has been made with the field hidden until the drop-down selection.

Question

I have a widget on my Wordpress site that is looking for my custom taxonomy. The search form also has 4 other options: minimum and maximum price and min. And max. Kw I want to hide the input field min and max kw if a specific option or its children is not selected. My form works, just need to get jquery implemented

I don't know jquery, but I found this solution , I'm just not sure how to implement it.

My form:

<form role="search" method="get" id="equipfilter" action="<?php bloginfo('url'); ?>/"> <fieldset> <?php $dropdown_args = array( 'taxonomy' => 'exc_equipment_cat', 'name' => 'exc_equipment_cat', 'show_count' => 1, 'orderby' => 'name', 'hierarchical' => true, 'echo' => 0, 'walker' => new Walker_SlugValueCategoryDropdown ); /* wp_dropdown_categories( $dropdown_args ); */?> <?php $select = wp_dropdown_categories($dropdown_args); $select = preg_replace("#<select([^>]*)>#", "<select$1 data-select='select1'>", $select); echo $select; ?> </fieldset> <fieldset class="hidden" data-select="NOT SURE WHAT TO PUT HERE"> <legend>Kw Range:</legend> <input type="text" name="kw_min" placeholder="min" value><br /> <input type="text" name="kw_max" placeholder="max" value> </fieldset> <fieldset> <legend>Price Range:</legend> <input type="text" name="pr_min" placeholder="from" value><br /> <input type="text" name="pr_max" placeholder="to" value> </fieldset> <input type="submit" id="filtersubmit" value="Search" /> </form> 

jQuery (Updated where it now works when tested with a test category, now I just need to find out this <fieldset class="hidden" data-select="NOT SURE WHAT TO PUT HERE"> ):

 jQuery(function ($){ $(function(){ $('.postform').change(function() { var selectData = $(this).attr("data-select"); var selectValue = $(this).val(); if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){ $("fieldset[data-select^='" + selectData + "']").hide(); $("fieldset[data-select='" + selectData + selectValue +"']").show(); } }); }); }); 

Answer 1

To use only jQuery to hide the use of the field (if Javascript is disabled, a hidden field will appear and you will not lose this parameter, as if you had hidden it with css):

 <script type="text/Javascript"> jQuery(function ($){ $(document).ready(function () { $(".kw").hide(); }); $(function(){ $('.postform').change(function() { var selectData = $(this).attr("data-select"); var selectValue = $(this).val(); $('.kw').hide(); if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){ $("fieldset[data-select^='" + selectData + "']").hide(); $("fieldset[data-select='" + selectData + selectValue +"']").show(); } }); }); }); </script> 

Answer 2

To hide the field, if another category is selected, change the code to:

 <script type="text/Javascript"> jQuery(function ($){ $(function(){ $('.postform').change(function() { var selectData = $(this).attr("data-select"); var selectValue = $(this).val(); $('.hidden').hide(); if($("fieldset[data-select='" + selectData + selectValue +"']").css("display") == "none"){ $("fieldset[data-select^='" + selectData + "']").hide(); $("fieldset[data-select='" + selectData + selectValue +"']").show(); } }); }); }); </script> 

Added code $('.hidden').hide(); into the code.