How to switch input class if it is not empty with jQuery?

Question

Using Bootstrap 4.

I have four text inputs, if any of the text inputs contains any values, I would like to add a class to the button.

When the button is pressed, I want to clear the input values ​​and remove the class from the button.

I have half the work (pressing a button successfully clears all inputs).

My code is below;

$(document).ready(function() { $("#filterRecords input").on("keyup change", function() { $("#filterRecords input").each(function() { var element = $(this); if (element.val().length > 0) { $('#resetFilter').addClass('btn-outline-primary'); } }); }); $('#resetFilter').click(function() { $('input[type=text]').val('').change(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row filterRecords"> <div class="input-group col-xs-6 col-sm-6 col-md-3 mb-3"> <input type="text" id="searchName" class="form-control" placeholder="Search Name"> </div> <div class="input-group col-sm-6 col-md-3 mb-3"> <input type="text" id="searchLang" class="form-control" placeholder="Search Language"> </div> <div class="input-group col-sm-6 col-md-3 mb-3"> <input type="text" id="yearMin" class="form-control start" placeholder="Search Start Year"> </div> <div class="input-group col-sm-6 col-md-3 mb-3"> <input type="text" id="yearMax" class="form-control end" placeholder="Search End Year"> </div> </div> <div class="row justify-content-md-center"> <div class="col-md-auto"> <button class="btn btn-sm btn-default" type="button" id="resetFilter">Reset Filters</button> <hr> </div> </div> 

Link to the script .

Any help would be appreciated.

Answer 1

First, filterRecords is a class, not an id , so your selector is incorrect.

Also, the problem with your logic is that it only ever adds a class when the input values ​​change. You also need to have some logic to remove it when no input has an input.

You can do this using toggleClass() along with a boolean based on the number of inputs filled, for example:

 $(document).ready(function() { var $inputs = $(".filterRecords input"); $inputs.on("input", function() { var $filled = $inputs.filter(function() { return this.value.trim().length > 0; }); $('#resetFilter').toggleClass('btn-outline-primary', $filled.length > 0); }); $('#resetFilter').click(function() { $inputs.val('').trigger('input'); }); }); 

 .btn-outline-primary { color: #C00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row filterRecords"> <div class="input-group col-xs-6 col-sm-6 col-md-3 mb-3"> <input type="text" id="searchName" class="form-control" placeholder="Search Name"> </div> <div class="input-group col-sm-6 col-md-3 mb-3"> <input type="text" id="searchLang" class="form-control" placeholder="Search Language"> </div> <div class="input-group col-sm-6 col-md-3 mb-3"> <input type="text" id="yearMin" class="form-control start" placeholder="Search Start Year"> </div> <div class="input-group col-sm-6 col-md-3 mb-3"> <input type="text" id="yearMax" class="form-control end" placeholder="Search End Year"> </div> </div> <div class="row justify-content-md-center"> <div class="col-md-auto"> <button class="btn btn-sm btn-default" type="button" id="resetFilter">Reset Filters</button> <hr> </div> </div> 

Also note the use of input over the keyup change combination.

Answer 2

Like this

 $(document).ready(function() { $("#filterRecords input").on("keyup change", function() { $("#filterRecords input").each(function() { var element = $(this); if (element.val().length > 0) { $('#resetFilter').addClass('btn-outline-primary'); } }); }); $('#resetFilter').click(function() { $("#filterRecords**")[0].reset(); $(this).removeClass('btn-outline-primary'); }); });