skip to Main Content

I would like to do two things:

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

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

8

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
  3. 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>
    Login or Signup to reply.
    1. Don’t mix DOM and jQuery like that
    2. 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>
    Login or Signup to reply.
  4. 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>
    Login or Signup to reply.
  5. 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>
    Login or Signup to reply.
  6. 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>
    Login or Signup to reply.
  7. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search