Calculate inputs with JavaScript

Navigation
1

I need to make + index work because it is a system for generating pages with embedded products. In this case, each inserted product will have a total0 + total1 and so on. However, 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><formaction="">
  
  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>
    
asked by anonymous 08.12.2017 / 16:23

4 answers

1

Solution using pure JavaScript with code reduction:

In order for the result to be updated in real-time same , I suggest using oninput instead of onblur , so the result is updated as something is typed in both fields . Staying like this: 

<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. You can 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>
    
08.12.2017 / 20:10
3

I think your problem is solved by putting a class in the 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><formaction="">
  
  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>
    
08.12.2017 / 16:33
0

The 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>
    
08.12.2017 / 16:38
0

Here is an example by adding an [add] attribute to facilitate 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><formaction="">
  
  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>
    
08.12.2017 / 16:32
How to insert a where inside a linq query How to restrict the value of the variable with only two decimal places? [closed]