Calculate inputs with Javascript

Question

I need to get the +index work as it is a page generation system with embedded products. In case, every product inserted will have a total0 + total1 and so on. But it has to be in real time the value!

function Soma(){
    var soma = 0;
    $('#total'+index).each(function(){
        var valorItem = parseFloat($(this).val());

        if(!isNaN(valorItem))
           soma += parseFloat(valorItem);
    });
  
    $('#final').val((soma).toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  
  Total produto1: <input type="text" id="total0" onblur="Soma()" value="0"><br>
  Total produto2: <input type="text" id="total1" onblur="Soma()" value="0"><br>
  <br>
  Total todos os produtos: <input type="text" id="final">
  
</form>

Answer 1

I think your problem is solved by putting a class in total inputs.

function Soma(){

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

        if(!isNaN(valorItem))
        soma += parseFloat(valorItem);
    });
  
    $('#final').val((soma).toFixed(2));
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  
  Total produto1: <input type="text" class="totais" id="total0" onblur="Soma()" value="0"><br>
  Total produto2: <input type="text" class="totais" id="total1" onblur="Soma()" value="0"><br>
  <br>
  Total todos os produtos: <input type="text" id="final">
  
</form>

Answer 2

Follow an example by adding an attribute [add] to make it easy in the selector.

function Soma(){

    var soma = 0;
    $('input[somar="true"]').each(function(index){
          var valorItem = parseFloat($(this).val());
          if(!isNaN(valorItem))
          soma += parseFloat(valorItem);
    });
  
    $('#final').val((soma).toFixed(2));
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  
  Total produto1: <input type="text" id="total0" somar="true" onblur="Soma()" value="0"><br>
  Total produto2: <input type="text" id="total1" somar="true" onblur="Soma()" value="0"><br>
  <br>
  Total todos os produtos: <input type="text" id="final">
  
</form>

Answer 3

Real-time calculation can be solved like this:

<form action="">

  Total produto1: <input type="text" id="total0" value="0"><br>
  Total produto2: <input type="text" id="total1" value="0"><br>
  <br>
  Total todos os produtos: <input type="text" id="final" value="0">

</form>

<script>
 $(document).ready(function(){

   $("#total0,#total1").keyup(function(){
     var total0 = $("#total0").val();
     var total1 = $("#total1").val();
     var total_geral = parseInt(total0)+parseInt(total1);
        $("#final").val(total_geral);
   });

 });
</script>

Answer 4

Solution using pure Javascript with code reduction:

For the result to be updated in real time even, I suggest using oninput instead of onblur, thus, the result is updated as something is typed in the two fields. Thus:

<form action="">
  Total produto1: <input type="text" oninput="Soma()" value="0"><br>
  Total produto2: <input type="text" oninput="Soma()" value="0"><br>
  <br>
  Total todos os produtos: <input type="text" id="final">
</form>

It is not necessary to put a id in the fields that will receive the values. It is possible to capture these elements only by an attribute they have in common: oninput="Soma()".

Final code:

function Soma(){
    var soma = 0;
    var ipts = document.querySelectorAll('input[oninput="Soma()"]');
    for(var x=0; x<ipts.length; x++){
       var valorItem = parseFloat(ipts[x].value);
       !isNaN(valorItem) ? soma += parseFloat(valorItem) : null;
    }
    document.querySelector('#final').value = soma.toFixed(2);
}

<form action="">
  Total produto1: <input type="text" oninput="Soma()" value="0"><br>
  Total produto2: <input type="text" oninput="Soma()" value="0"><br>
  <br>
  Total todos os produtos: <input type="text" id="final">
</form>