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=".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>

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./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.

• javascript
• jquery
• html
• twitter-bootstrap

• fiddle link? i dont see one – Deckerz Commented Nov 29, 2017 at 11:48
• 5 Your filterRecords is a class not an ID . Prove <div class="row filterRecords"> and $("#filterRecords input") Change this and your code works – Carsten Løvbo Andersen Commented Nov 29, 2017 at 11:48
• 5 @Andreas stop with the copy paste crap he clearly states what he wants – Deckerz Commented Nov 29, 2017 at 11:51
• 3 What's not clear about 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).? – Rory McCrossan Commented Nov 29, 2017 at 11:53
• 1 I have four text inputs, if any of the text inputs contain any values, i'd like to add a class to a button. and I have half of it working (clicking button successfully clears all inputs). implies what he wants and is missing @Andreas – Deckerz Commented Nov 29, 2017 at 11:53

2 Answers 2

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./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 bination of keyup change.

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