CODEWITHSUNDEEP
javascriptjquery
sam
sam

Reputation: 1087

jQuery count number of input fields that have a value

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/

Upvotes: 1

Views: 3650

Answers (4)

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

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>

Upvotes: 2

Martijn
Martijn

Reputation: 16123

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>

Upvotes: 1

Ashique
Ashique

Reputation: 355

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/

Upvotes: 2

CertainPerformance
CertainPerformance

Reputation: 371233

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.

Upvotes: 2

Related Questions