1

Tenho os seguintes campos vindos do banco de dados:

<?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>";
    .....
}
?>

Porém gostaria de contar quantos campos vazios tem, ou seja, quantos campos não foram digitados pelo usuário. Entende-se que não quero uma validação de campos ;) , mas apenas contar o total de quantos campos que não foram preenchidos. Tentei usar o código abaixo, mas não funcionou:

....
$(\"[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);
....
4
  • Inclusive o "valorFinal"?
    – Sam
    Commented 30/04/2018 às 13:24
  • Olá dvd. Sem o valorFinal. Na verdade é em cima da sua solução que você me passou no post antigo. Como é um outro assunto, abri esse post. Seria nessa linha: $("[name='ValorFinal[]']", parent).val((valor1+valor2)/3); onde o valor 3, seria o valor dos campos preenchidos, ignorando os campos vazios, ou seja, se prencher apenas 02 campos, ficaria 2.
    – user24136
    Commented 30/04/2018 às 13:27
  • Ah sim, eu postei a resposta contando todos os campos da tabela... mas vc quer apenas da linha, não é mesmo?
    – Sam
    Commented 30/04/2018 às 13:36
  • Editei a resposta. No seu caso seria "contar campos preenchidos" e não "vazios"... neste caso é só retirar o ! de !$(this).val();...
    – Sam
    Commented 30/04/2018 às 13:46

2 Respostas 2

2

Você pode fazer isso com filter. Irá retornar apenas o número de campos vazios na linha:

$("[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>

3
  • Muito obrigado a todos, mas a resposta do dvd serviu melhor para a minha dúvida.
    – user24136
    Commented 30/04/2018 às 19:53
  • afinal de contas, contar o que mesmo? :D até agora não consegui saber ao certo
    – user60252
    Commented 30/04/2018 às 20:12
  • @LeoCaracciolo Os campos vazios em cada linha. :D
    – Sam
    Commented 30/04/2018 às 20:19
1

De uma forma mais direta, bastando preencher os inputs, a função vai contar quantos estão nulos.

Quando você usa name^='ValorI' está excluindo da contagem o ultimo input de cada linha.

$("[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>

Você deve fazer log-in para responder a esta pergunta.