calculate values of inputs with the same class

1

I need to do a real-time calculation with divs with the same class inserting the result into another one.

The code which I am trying to develop is at the link below

var qtde_inputs = $('.quant').value;
var soma_inputs = 0;

$('.quant').each(function calcula(i,item){
  var valorItem = parseFloat($(item).val());

  if(!isNaN(valorItem))
    soma_inputs += parseFloat($(item).val());
    
  document.getElementById('seu_campo_destino_da_soma').value = (soma_inputs).toFixed(2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><inputtype="text" class="quant" value="10" onblur="calcula()">
  <input type="text" class="quant" value="10" onblur="calcula()">
  <input type="text" class="quant" value="40" onblur="calcula()">
  
  
  <input type="text" id="seu_campo_destino_da_soma">
<form>
    
asked by anonymous 08.12.2017 / 13:16

1 answer

0

Just put your calculation in a function and call this function every time one of your <input /> of the quant class changes.

$('.quant').on("blur", Soma);

function Soma(){
  var soma = 0;
	$('.quant').each(function(){
    var valorItem = parseFloat($(this).val());

    if(!isNaN(valorItem))
      soma += parseFloat(valorItem);
  });
  
  $('#soma').val((soma).toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><div><inputtype="text" class="quant" value="0">
    +
  </div>
  <div>
    <input type="text" class="quant" value="0">
    +
  </div>
  <div>
    <input type="text" class="quant" value="0">
    +
  </div>
  <div>
    <input type="text" id="soma" value="0">
  </div>
<form>
    
08.12.2017 / 13:29