Count how many empty fields you have in the form with Jquery

Asked

Viewed 165 times

1

I have the following fields from the database:

<?php 
while($peListar = mysqli_fetch_object($sqlListar){
    .....
    $listar .= "<td style='".$fundo."'><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>";
    $listar .= "<td style='".$fundo."'><input type='text' name='ValorII[]' class='md-form-control' value=''></td>";
    $listar .= "<td style='".$fundo."'><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>";
    $listar .= "<td style='".$fundo."'><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>";
    .....
}
?>

But I would like to count how many empty fields you have, that is, how many fields were not typed by the user. It is understood that I do not want a validation of fields ;) but only count the total of how many fields have not been filled in. I tried to use the code below, but it didn’t work:

....
$(\"[name^='ValorI']\").on(\"input\", function(){
.....
var myForm = this.form;
var vazios = 0;
for(var i = 0; i < myForm.elements.length; i++) {
if (myForm.elements[i].value === \"\")
 vazios += 1;
}
alert(vazios);
....
jquery

  • Including the "valorFinal"?

  • Hello dvd. No valueFinal. Actually it is upon your solution that you passed me in the old post. As is another subject, I opened this post. Seria nessa linha: $("[name='ValorFinal[]']", parent).val((valor1+valor2)/3); where the value 3, would be the value of the fields filled, ignoring the empty fields, ie if only fill 02 fields, would be 2.

  • Oh yes, I posted the answer counting all the fields in the table... but you just want the line, it’s not even?

  • I edited the answer. In your case it would be "count filled fields" and not "empty"... in this case just remove the ! of !$(this).val();...

2 answers

1

In a more direct way, simply fill in the inputs, the function will count how many are null.

When you use name^='ValorI' is excluding the last from the count input of each line.

$("[name^='ValorI']").on("input", function(){
var matches = 0;

    $("[name^='ValorI']").each(function(i, val) {
       if ($(this).val() == '') {
          matches++;
       }
    });

console.log(matches);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
   
</table>

1


You can do this with filter. Will return only the number of empty fields on the line:

$("[name^='ValorI']").on("input", function(){

   var linha = $(this).closest("tr"); // seleciona a linha TR
   
   // busca os inputs na linha com name iniciando com "ValorI"
   var campos = $("[name^='ValorI']", linha);

   // conta apenas os vazios
   var vazios = campos.filter(function(){
       return !$(this).val();
   }).length;

   console.log(vazios);
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
</table>

  • Thank you all very much, but the response of the dvd served better for my doubt.

  • After all, tell what exactly? : D so far I have not been able to know for sure

  • @Leocaracciolo Empty fields in each row. D

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.