CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
TheOrdinaryGeek
TheOrdinaryGeek

Reputation: 2323

How to toggle a class of an input if it's not empty with jQuery?

Using Bootstrap 4.

I have four text inputs, if any of the text inputs contain any values, i'd like to add a class to a button.

When the button is clicked, I would like to clear the input values, and remove the class from the button.

I have half of it working (clicking 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>

Fiddle link.

Any help would be appreciated.

Upvotes: 7

Views: 2174

Answers (2)

Varuzhan Ghazaryan
Varuzhan Ghazaryan

Reputation: 3

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');
  });
});

Upvotes: -1

Rory McCrossan
Rory McCrossan

Reputation: 337570

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

Aside from that, the issue with your logic is that it only ever add the class when the input values change. You also need to have some logic to remove it when no input has a value entered.

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

$(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 combination of keyup change.

Upvotes: 11

Related Questions