jQuery count number of input fields that have a value

Question

When a value is entered in an input field, I want to count how many input fields in that row have a value in total.

<div class="row">
    <input type="text" class="input input1" />
    <input type="text" class="input input2" />
    <input type="text" class="input input2" />
</div>

<div class="row">
    <input type="text" class="input input1" />
    <input type="text" class="input input2" />
    <input type="text" class="input input2" />
</div>

I'm trying following but I think problem is with the loop.

$('.input').keyup(function () {

    var field = $(this).parent().children('.input');
    var count = 0;

    $(field).each(function (i) {
        var len = $(field).val().length;        
        if (len > 0 ) {
            count++;
        }
    });

  alert(count);

});

JSFiddle link: http://jsfiddle.net/18cpotw6/

off topic: You might find it easier to user variable names that match what they contain - in this case `var fields = ..list of inputs..` then `$(fields).each(function (i, e) { var field = $(e); field.val().. }` — freedomn-m, Oct 29 '19 at 08:35

score 2 · Accepted Answer · answered Oct 29 '19 at 08:20

With $(field).val(), you're retrieving the value of the first element in the field jQuery collection. Use $(this).val() instead:

$('.input').keyup(function() {

  var field = $(this).parent().children('.input');
  var count = 0;

  $(field).each(function() {
    if ($(this).val()) {
      count++;
    }
  });

  console.log(count);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <input type="text" class="input input1" />
  <input type="text" class="input input2" />
  <input type="text" class="input input2" />
</div>

<div class="row">
  <input type="text" class="input input1" />
  <input type="text" class="input input2" />
  <input type="text" class="input input2" />
</div>

You can also remove the i parameter, since it's not being used.

score 2 · Answer 2 · answered Oct 29 '19 at 08:23

You looped through the fields you have found but used the same field variable which contains all the fields to find the values. Instead you have to do this-

$('.input').keyup(function () {

    var field = $(this).parent().find('.input');
    var count = 0;

    $(field).each(function (i) {
        var len = $(this).val().length;     
        if (len > 0 ) {
            count++;
        }
    });

  alert(count);

});

Fiddle: http://jsfiddle.net/ashhaq12345/yxrwdkfL/3/

score 2 · Answer 3 · answered Oct 29 '19 at 08:32

From reference to this post, you can also create a custom selector and then only get input which has values.

jQuery.expr[':'].hasValue = function(el, index, match) {
  return el.value != "";
};

$('.input').keyup(function() {
  console.log($(this).parent().find('input:hasValue').length);
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="row">
  <input type="text" class="input input1" />
  <input type="text" class="input input2" />
  <input type="text" class="input input2" />
</div>

<div class="row">
  <input type="text" class="input input1" />
  <input type="text" class="input input2" />
  <input type="text" class="input input2" />
</div>

Martijn · Answer 4 · 2019-10-29T08:27:08.203

You can use filter. You first select the elements, and then filter them on if they have a value or not:

function example(){
    const $row = $('.row');
    const length = $row.find('input').filter(function() {
        return this.value.length !== 0;
    }).length;
    
    console.log(length);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
    <input class="someSelection" />
    <input class="someSelection" value="foo" />
    <input class="someSelection" />
    <input class="someSelection" value="bar"/>
</div>
<button onclick="example()">Press me!</button>

jQuery count number of input fields that have a value

4 Answers4