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

admin 管理员组

文章数量: 1086019

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

Share Improve this question Follow edited Nov 29, 2017 at 13:56 roberrrt-s 8,22022 gold badges4949 silver badges6060 bronze badges asked Nov 29, 2017 at 11:44 TheOrdinaryGeekTheOrdinaryGeek 2,32355 gold badges2222 silver badges5656 bronze badges 8

• 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

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 11

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

本文标签： javascriptHow to toggle a class of an input if it39s not empty with jQueryStack Overflow