Wie berechnet man die Summe bei Änderung?

Question

Wie wird die Summe zweier Felder bei der Änderung berechnet?

Mein HTML

<div class="field"> 
    <label for="field1">F1:</label> 
    <input type="number" name="field1" min="0" placeholder="0" Title="Only positive numbers" required></div> 
    <div class="field"> 
<label for="field2">Field2:</label> 
<input type="number" name="field2" disabled> 
</div> 

Und ich habe dies aber noch nicht sicher, wie das funktioniert/wie man es arbeiten ..

Gibt es einen einfacheren Weg, dies zu tun?

Answer 1

Jede Änderung in input löst die Callback-Funktion .on() aus. Inside erhalten Sie den Wert field1 und field2 und analysieren Sie es in int, da sie eine Zeichenfolge werden. Fügen sie beide und fügen Sie in field3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field"> 
 
    <label for="field1">F1:</label> 
 
    <input type="number" id="field1" min="0" placeholder="0" Title="Only positive numbers" required/> 
 
</div> 
 
<div class="field"> 
 
    <label for="field2">Field2:</label> 
 
    <input type="number" id="field2"/> 
 
</div> 
 

 
<input type="number" disabled id="field3"></input> 
 

 
<script> 
 
    $("input").on("change", function() { 
 
    var ret = parseInt($("#field1").val()) + parseInt($("#field2").val() || '0') 
 
    $("#field3").val(ret); 
 
    }) 
 
</script>

Answer 2

Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br> 
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br> 
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br> 
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br> 
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br> 
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br> 
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br> 
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br> 
<br><br> 
Total : <input type="text" name="total" id="total"/> 


    <script type="text/javascript"> 
function findTotal(){ 
    var arr = document.getElementsByName('qty'); 
    var tot=0; 
    for(var i=0;i<arr.length;i++){ 
     if(parseInt(arr[i].value)) 
      tot += parseInt(arr[i].value); 
    } 
    document.getElementById('total').value = tot; 
} 

    </script> 

Link: - How get total sum from input box values using Javascript? oder Link: - http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml

Answer 3

Sie können die gleiche Klasse an die beiden Eingänge gesetzt und dann auf den Klassenwechsel können Sie die Werte dieser Eingaben erhalten, indem ihre IDs (die Sie auch festlegen können), und fügen Sie sie einfach hinzu.

Etwas wie:

<input id="input1" class="myclass"/> 
<input id="input2" class="myclass"/> 

Und dann auf der JavaScript-Seite:

$(".myclass").on("change", function(){ 
    var value1 = document.getElementById('input1').value; 
    var value2 = document.getElementById('input2').value; 
    var sum = parseInt(value1) + parseInt(value2); 
}); 

Answer 4

Convert String Nummer mit + Operator so +"0" === 0 und +"1" + +"2" === 3

$(".input").on("keyup change click", function() { 
 
    var ret = +$("[name=field1]").val() + +$("[name=field2]").val(); 
 
    $("[name=field3]").val(ret); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="field"> 
 
    <label for="field1">Field1:</label> 
 
    <input class='input' type="number" name="field1" value='0' min="0" placeholder="0" Title="Only positive numbers" required> 
 
</div> 
 

 
<div class="field"> 
 
    <label for="field2">Field2:</label> 
 
    <input class='input' type="number" name="field2" value='0' min="0" placeholder="0"> 
 
</div> 
 

 
<div class="field"> 
 
    <label for="field3">Result:</label> 
 
    <input type="number" name="field3" disabled> 
 
</div>

Answer 5

Ihr Weg ist in Ordnung, aber ich ziehe mit am Eingang Event-Handler, da es schneller ist in die Gesamtzahl zu aktualisieren.

Auch wenn Sie möchten die Summe Prozess erweitern viele Textbox zu behandeln (s) Sie können folgende Aktionen

$(document).ready(function(){ 
 
    $(".parameter").on("input",function() { 
 
     var total=0; 
 
     $(".parameter").each(function(){ 
 
      if(!isNaN(parseInt($(this).val()))) 
 
      { 
 
      total+=parseInt($(this).val()); 
 
      } 
 
     }); 
 
     $(".total").val(total); 
 
\t }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div class="field"> 
 
    <label for="field1">F1:</label> 
 
    <input type="number" class="parameter" name="field1" min="0" placeholder="0" Title="Only positive numbers" required></div> 
 
    <div class="field"> 
 
<label for="field2">F2:</label> 
 
<input type="number" class="parameter" name="field2" min="0" placeholder="0" Title="Only positive numbers" required> 
 
</div> 
 
    <div class="field"> 
 
<label for="field2">F3:</label> 
 
<input type="number" class="parameter" name="field3" min="0" placeholder="0" Title="Only positive numbers" required> 
 
</div> 
 
    <div class="field"> 
 
<label for="field2">Total:</label> 
 
<input type="number" class="total" name="total" min="0" placeholder="0" Title="Only positive numbers" required> 
 
</div>

Durch diese Art und Weise verwenden, können Sie so viele wie Nummernfelder umfassen in der Summe, und alles, was Sie tun müssen, ist, class = "Parameter" zu diesem neuen Nummernfeld hinzuzufügen.