Count number of inputs and sum depending on its values - Jquery

blacksun___
December 28, 2022
294 views
7 votes
8 Answers

I would like to do two things:

I want to count the number of inputs that have a value. (doesn’t matter if the value is A or X).
Then, count the number of inputs whose value is equal to A

therefore, the results should contain 6 of 14 items

This is what I tried to count the inputs that already have value:

var filledInputs = $(".col input").filter(function() {
  return !!this.value;
}).length;

const test2 = document.querySelectorAll(".result");
test2.forEach((item) => {
  item.innerHTML = filledInputs;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
  <input type="text" value="A">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

<div class="results"></div>

Tags: javascript jquery

Answers

One possible implementation with jQuery:

let any = 0;
let a = 0;
$(".col input").each((idx, item) => {
    if (!item.getAttribute("value")) {
        return;
    }
    
    if (item.getAttribute("value") == "A") {
        a += 1;
    }
    
    any += 1;
});
$(".results").html(a + " of " + any + " items")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
        <input type="text" value="A">
        <input type="text" value="A">
        <input type="text" value="X">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text" value="A">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text" value="X">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>

    <div class="results">
        6 of 14 items
    </div>

var $inputs = $(".col input").filter(function() {
  return !!$(this).val();
});

var inputsFilled = $inputs.length
var inputsA =$inputs.filter(function() {
  return $(this).val() == 'A';
}).length

console.log(inputsFilled)
console.log(inputsA)

$(".results").html(`${inputsA} of ${inputsFilled} are A`)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

<div class="results"></div>

Use the same logic that you made to find the filled inputs, to find the inputs with value A

const filledInputs = $(".col input").filter(function () {
  return !!this.value;
}).length;
const inputWithValA = $(".col input").filter(function () {
  return this.value === 'A';
}).length;
console.log(filledInputs)
console.log(inputWithValA)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="col">
  <input type="text" value="A" />
  <input type="text" value="A" />
  <input type="text" value="X" />
  <input type="text" value="X" />
  <input type="text" value="A" />
</div>
<div class="col">
  <input type="text" value="A" />
  <input type="text" value="X" />
  <input type="text" value="A" />
</div>
<div class="col">
  <input type="text" value="X" />
  <input type="text" value="X" />
  <input type="text" value="A" />
</div>
<div class="col">
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

<div class="results">6 of 14 items</div>

Don’t mix DOM and jQuery like that
You are looping over one element

Perhaps you meant this:

const $breakdown = $("#breakdown");
const $results = $(".results")
let totalA = 0;
let totalNonEmptyInput = 0;
$(".col").each(function(i, ele) {
  const $inputs = $(ele).find("input");
  let As = 0;
  const notEmpty = $inputs.filter(function() { 
    const val = this.value.trim();
    if (val === "A") {
      As++;
      totalA++;
    }  
    totalNonEmptyInput += val !== "";
    return val !== "" 
  }).length;
  $results.html(`${totalA} of ${totalNonEmptyInput}`)
  $breakdown.append(`<li>${(i+1)}: ${notEmpty}/${$inputs.length} - found ${As} A</li>`)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

<div class="results"></div>
<ul id="breakdown"></ul>

Here’s a minimal solution:

var AInputs = $(":input[value='A']").length;
console.log(AInputs);

Full snippet:

var filledInputs = $(".col input").filter(function() {
  return !!this.value;
}).length;

console.log(filledInputs);

var AInputs = $(":input[value='A']").length;
console.log(AInputs);

const test2 = document.querySelectorAll(".result");
test2.forEach((item) => {
  item.innerHTML = filledInputs;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

<div class="results"></div>

const cols_ = document.querySelectorAll('.col');
let inputs_val_a = []; // matched input will stored here

cols_?.forEach(function(col,col_i){
  
  col.querySelectorAll('input')?.forEach(function(ipt, ipt_i){

    if( ipt.value == 'A' ){
      // match
      console.log('cols:'+col_i+' input:'+ipt_i+' have value "A"');
      inputs_val_a.push(ipt);
    }
  })
});

document.querySelector('.results').innerHTML = 'there is '+ inputs_val_a.length + ' inputs with value == A';

<div class="results"></div>

<div class="col">
  <input type="text" value="A">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="A">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text" value="X">
  <input type="text" value="X">
  <input type="text" value="A">
</div>
<div class="col">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

Maybe the easiest method (and marginally more performant than filtering) in vanilla JS is to do three selections: one on all inputs, and then two selections using the value attribute.

const inputs = document.querySelectorAll('input');
const inputsAll = document.querySelectorAll('[value]');
const inputsA = document.querySelectorAll('[value="A"]');

console.log(`${inputsAll.length} of ${inputs.length} items`);
console.log(`${inputsA.length} of ${inputs.length} items`);

<div class="col"> <input type="text" value="A"> <input type="text" value="A"> <input type="text" value="X"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text" value="A"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text" value="X"> <input type="text" value="X"> <input type="text" value="A"></div><div class="col"> <input type="text"> <input type="text"> <input type="text"></div><div class="results"></div>

If you want updated counts while you are filling in the fields you could recalculate it in an event driven function:

const inps=$(".col input").get(); 
$("body").on("input",".col input",upd8);
function upd8(){
 [any,A]=inps.reduce((a,c)=>  (c.value&&++a[0]&&c.value.toUpperCase()=="A"&&++a[1],a),[0,0]);
 $(".results").html(A + " of " + any + " items")
};
upd8();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
        <input type="text" value="A">
        <input type="text" value="A">
        <input type="text" value="X">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text" value="A">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text" value="X">
        <input type="text" value="X">
        <input type="text" value="A">
    </div>
    <div class="col">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>

    <div class="results">
        6 of 14 items
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Count number of inputs and sum depending on its values – Jquery

Answers