Get input sum value with Jquery

Asked

Viewed 3,583 times

0

Good evening, everyone.

I can’t put together a cool script for that. For example, I have four inputs and, just after I fill in some of them, I would like to display the result of the sum of inputs.

Does anyone have a working example that can help me?

Thank you!

jquery

3 answers

2

You didn’t post code or give details about your specific problem (avoid that). However, according to the description it is possible to present a solution on which you can rely.

$(".input-teste").change(function(){
  var total = 0;
  $(".input-teste").each(function(index,element){
     if ($(element).val()) {
       total+= parseInt($(element).val());
     }
 });
 $(".show-total").text(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="input-teste" type="text" value="" ><br>
<input class="input-teste" type="text" value="" ><br>
<input class="input-teste" type="text" value="" ><br>
<input class="input-teste" type="text" value="" ><br>
<br>
Total: <label class="show-total"></label>

1

There are many ways to achieve this.

I will collaborate with an example where it is necessary to work with decimals and disregard non-numerical values;

$('input').css('margin-bottom', '5px').on('change', function() {
  
  var v = 0;  
  
  $('input').each(function(i,e) {   
    
    if ($(e).val()) {
      
      var i = $(e).val().replace(/\,/g,'.');
      
      if (isNaN(i)) { $(e).val(''); return; }
          
      v += parseFloat(i);
   
      $('div').text('Total: ' + v.toFixed(2));

    
    }
    
    });
      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="" ><br>
<input type="text" value="" ><br>
<input type="text" value="" ><br>
<input type="text" value="" ><br>

<div></div>

0

Complementing the responses of the other collaborators, below follows an example making use of the methods map and reduce of the object Array.

function extrairValor(elemento) {
  return parseInt(elemento.value, 10);
}

function funcaoSoma(valorAnterior, valor) {
  return valorAnterior + valor || valorAnterior;
}

function somarValoresPorSeletor(seletor) {
  return $(seletor)
    .toArray()
    .map(extrairValor)
    .reduce(funcaoSoma);
}

function onCampoChange() {

  var resultado = somarValoresPorSeletor('input');

  $('h1').find('span').html(resultado);

}

$(function() {

  onCampoChange();

  $('input').on('change keyup', onCampoChange);

});
input {
  margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>resultado: <span></span></h1>

<ul>
  <li>
    <input type="text" value="1" />
  </li>
  <li>
    <input type="text" value="2" />
  </li>
  <li>
    <input type="text" value="3" />
  </li>
  <li>
    <input type="text" value="3" />
  </li>
  <li>
    <input type="text" value="3" />
  </li>
</ul>

Browser other questions tagged jquery

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