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

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/18cpotw6/

• javascript
• jquery

• 1 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().. } – fdomn-m Commented Oct 29, 2019 at 8:35

4 Answers 4

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

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/ashhaq12345/yxrwdkfL/3/

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

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