I would like to do two things:
-
I want to count the number of
inputsthat have a value. (doesn’t matter if the value is A or X). -
Then, count the number of
inputswhose 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>>Solution :
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>