0

Tenho o seguinte HTML

<form id="FrmLoja" method="post" action="#">
  <input type="text" name="valor[]" id="valor" value="0" />
  <input type="text" name="valor[]" id="valor" value="0" />
  <input type="text" name="valor[]" id="valor" value="0" />
  <input type="text" name="valor[]" id="valor" value="0" />
  <input type="text" name="valor[]" id="valor" value="0" />
  <input type="text" name="valor[]" id="valor" value="0" />
  <input type="text" name="valor[]" id="valor" value="0" />
  <input type="text" name="valor[]" id="valor" value="0" />
  <input type="text" name="total" id="total" value="" />
</form>

Preciso somar todos os valores e inserir o resultado total, sem a necessidade de um reload na página... Este campo valor, é um campo dinâmico, onde eu tenho um btn (+) que adiciona uma nova linha sempre que preciso, dentro do array... Como eu posso fazer esta soma?

1 Resposta 1

1

Faz assim:

 $('#add').click(function() {
  $('.fields').append('<input type="text" name="valor[]" id="valor" value="0" onkeyup="sum()" />');
});

function sum()
{
  let total = 0;
   
  $('.fields input').each(function() {
      total += +$(this).val();
  });
  $('#total').val(total);
}
.fields input {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<form id="FrmLoja" method="post" action="#">
  <div class="fields">
    <input type="text" name="valor[]" id="valor" value="0" onkeyup="sum()"/>
  </div>

  <input type="text" name="total" id="total" value="" />

  <button type="button" id="add">+</button>
</form>

OBS.: Deixei o evento como keyup só como exemplo, você pode altera-lo para onblur para que a soma seja feita só quando o usuário terminar de digitar e tirar o foco do campo.

2

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .