Get the value of the sum of inputs with Jquery

Question

Get the value of the sum of inputs with Jquery

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

Good evening guys.

I can not build a cool script for this. For example, I have four inputs, and right after I populate some of them, I would like to display the result of the sum of the inputs.

Does anyone have any working examples that can help me?

Thank you!

jquery

asked by anonymous 05.02.2017 / 23:25

3 answers

ASP.NET MVC & WEB API authentication with token Fatal error: Call a member function prepare () on a non-object

score 1 · Answer 1

You have not posted any code or gave details about your specific issue (avoid this). However, according to the description it is possible to present a solution that you can base yourself on.

$(".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><inputclass="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>

score 1 · Answer 2

There are several ways to achieve this.

I will collaborate with an example where it is necessary to work with decimals and disregard non-numeric 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><inputtype="text" value="" ><br>
<input type="text" value="" ><br>
<input type="text" value="" ><br>
<input type="text" value="" ><br>

<div></div>

score 0 · Answer 3

Complementing the responses of other collaborators, here's an example using the 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><inputtype="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>