Toggle Empty Inputs

Toggle button class based on input value

by TheOrdinaryGeek

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.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>

CSS

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

JavaScript

/* 
check if there is anything in any of the text inputs 
if yes, add class to reset button
*/
$(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');
  });
});