Wie berechne ich den richtigen Gesamtbetrag nach jquery?

Question

Ich muss den Gesamtbetrag mit dem folgenden Code berechnen.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<table border="1px solid black"> 
<tr> 
<td>Quantity :</td><td><input type="text" id="qty"></td> 
</tr> 
<tr> 
<td>Rate :</td><td><input type="text" id="rate"></td> 
</tr> 
<tr> 
<td>Discount :</td><td><input type="text" id="dis"></td> 
</tr> 
<tr> 
<td>VAt :</td><td><input type="text" id="vat" onchange="calCulate();"></td> 
</tr> 
<tr> 
<td>Total :</td><td> <input type="text" id="total_amount"></td> 
</tr> 

</table> 
<script> 
function calCulate(){ 
    qty = $('#qty').val(); 
    rate = $('#rate').val(); 
    dis = $('#dis').val(); 
    if(!dis) 
     dis = 0; 
    vat = $('#vat').val(); 
    total = parseInt((qty * rate) - dis) + parseInt(vat); 
    $('#total_amount').val(total); 

} 

</script> 

Es gibt mir richtige Menge aber nach der Berechnung, wenn ich jede Menge ändere andere dann mein Gesamtbetrag ohne Mehrwertsteuer ändern, weil Skript nicht für that.Please geschrieben wird mir helfen, es zu tun zu aktualisieren, wenn eine Variable ändern wird.

Vielen Dank im Voraus.

Answer 1

Um dies zu erreichen, müssen Sie nur die Funktionslogik an das change Ereignis aller input Elemente anhängen.

Ein viel besserer Weg, dies zu tun wäre, unauffällige Event-Handler anstelle der veralteten on* Event-Attribute zu verwenden. Da Sie jQuery bereits integriert haben, können Sie das verwenden.

Beachten Sie auch, dass Sie idealerweise parseInt() oder parseFloat() verwenden sollten, um die von val() zurückgegebenen Strings in numerische Werte zu konvertieren. Versuchen Sie folgendes:

$('#qty, #rate, #dis, #vat').change(function() { // or use a common class 
 
    qty = parseInt($('#qty').val(), 10); 
 
    rate = parseFloat($('#rate').val()); 
 
    dis = parseFloat($('#dis').val() || 0); 
 
    vat = parseFloat($('#vat').val()); 
 
    total = parseFloat((qty * rate) - dis) + parseInt(vat); 
 
    $('#total_amount').val(total || 0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1px solid black"> 
 
    <tr> 
 
    <td>Quantity :</td> 
 
    <td><input type="text" id="qty"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Rate :</td> 
 
    <td><input type="text" id="rate"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Discount :</td> 
 
    <td><input type="text" id="dis"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>VAt :</td> 
 
    <td><input type="text" id="vat"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Total :</td> 
 
    <td><input type="text" id="total_amount"></td> 
 
    </tr> 
 
</table>

Answer 2

function calCulate(){ 
    qty = parseInt($('#qty').val()); 
    rate = parseInt($('#rate').val()); 
    dis = parseInt($('#dis').val()); 
    if(!dis) 
     dis = 0; 
    vat = parseInt($('#vat').val()); 
    total = ((qty * rate) - dis) + vat; 
    $('#total_amount').val(total); 

} 

Answer 3

Sie es ausprobieren können.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<table border="1px solid black"> 
 
<tr> 
 
<td>Quantity :</td><td><input type="text" id="qty" onchange="calCulate();"></td> 
 
</tr> 
 
<tr> 
 
<td>Rate :</td><td><input type="text" id="rate" onchange="calCulate();"></td> 
 
</tr> 
 
<tr> 
 
<td>Discount :</td><td><input type="text" id="dis" onchange="calCulate();"></td> 
 
</tr> 
 
<tr> 
 
<td>VAt :</td><td><input type="text" id="vat" onchange="calCulate();"></td> 
 
</tr> 
 
<tr> 
 
<td>Total :</td><td> <input type="text" id="total_amount"></td> 
 
</tr> 
 

 
</table> 
 
<script> 
 
function calCulate(){ 
 
    qty = parseInt($('#qty').val(), 10); 
 
    rate = parseFloat($('#rate').val()); 
 
    dis = parseFloat($('#dis').val() || 0); 
 
    vat = parseFloat($('#vat').val()); 
 
    total = parseFloat((qty * rate) - dis) + parseInt(vat); 
 
    $('#total_amount').val(total || 0); 
 

 
} 
 

 
</script>

Answer 4

Hallo können Sie tun, wie dies

<script> 
 
function calCulate(){ 
 
    total = 0; 
 
    qty = $('#qty').val(); 
 
    rate = $('#rate').val(); 
 
    dis = $('#dis').val(); 
 
    if(!dis) 
 
     dis = 0; 
 
    if(!rate) 
 
     rate = 0; 
 
    if(!qty) 
 
     qty = 0; 
 
    vat = $('#vat').val(); 
 
    if(!vat) 
 
     vat = 0; 
 
    total = parseInt((qty * rate) - dis) + parseInt(vat); 
 
    $('#total_amount').val(total); 
 

 
} 
 

 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<table border="1px solid black"> 
 
<tr> 
 
<td>Quantity :</td><td><input type="text" id="qty" onchange="calCulate();"></td> 
 
</tr> 
 
<tr> 
 
<td>Rate :</td><td><input type="text" id="rate" onchange="calCulate();"></td> 
 
</tr> 
 
<tr> 
 
<td>Discount :</td><td><input type="text" id="dis" onchange="calCulate();"></td> 
 
</tr> 
 
<tr> 
 
<td>VAt :</td><td><input type="text" id="vat" onchange="calCulate();"></td> 
 
</tr> 
 
<tr> 
 
<td>Total :</td><td> <input type="text" id="total_amount"></td> 
 
</tr> 
 

 
</table>

Sie globale Funktion auf jedes Feld aufrufen kann, um einen beliebigen Wert seinen wechselnden Wieder berechnen die Gesamt Menge.

Answer 5

Geben Sie alle Ihre input Felder die gleichen class, und verwenden Sie dann .change(), um jede Änderung an einem dieser Eingabefelder zu erkennen und führen Sie Ihre Berechnungsfunktion aus.

$('.input').change(function() { 
 
    qty = $('#qty').val(); 
 
    rate = $('#rate').val(); 
 
    dis = $('#dis').val(); 
 
    if (!dis) 
 
    dis = 0; 
 
    vat = $('#vat').val(); 
 
    total = parseInt((qty * rate) - dis) + parseInt(vat); 
 
    $('#total_amount').val(total); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1px solid black"> 
 
    <tr> 
 
    <td>Quantity :</td> 
 
    <td><input type="text" class="input" id="qty"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Rate :</td> 
 
    <td><input type="text" class="input" id="rate"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Discount :</td> 
 
    <td><input type="text" class="input" id="dis"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>VAT :</td> 
 
    <td><input type="text" class="input" id="vat"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Total :</td> 
 
    <td> <input type="text" class="input" id="total_amount"></td> 
 
    </tr> 
 
</table>

Answer 6

$("input").on("input",calCulate)// sisnce you have the function call the function on input on input 
 

 

 
function calCulate() { 
 
    qty = $('#qty').val(); 
 
    rate = $('#rate').val(); 
 
    dis = $('#dis').val(); 
 
    if (!dis) 
 
    dis = 0; 
 
    vat = $('#vat').val(); 
 
    total = parseInt((qty * rate) - dis) + parseInt(vat); 
 
    $('#total_amount').val(total); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1px solid black"> 
 
    <tr> 
 
    <td>Quantity :</td> 
 
    <td><input type="text" id="qty"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Rate :</td> 
 
    <td><input type="text" id="rate"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Discount :</td> 
 
    <td><input type="text" id="dis"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>VAt :</td> 
 
    <td><input type="text" id="vat"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Total :</td> 
 
    <td> <input type="text" id="total_amount"></td> 
 
    </tr> 
 

 
</table>

Rufen Sie die Funktion, die Sie jetzt auf Eingabe/Art haben bei der Eingabe/Text

Answer 7

Sie können meine Demo versuchen, hoffen, dass dies kann Hilfe!

demo

-

$(document).ready(function(){ 
    $(document).on('keyup', 'input', calCulate); 
}); 

function calCulate(){ 
    qty = $('#qty').val(); 
    rate = $('#rate').val(); 
    dis = $('#dis').val(); 
    if(!dis) 
     dis = 0; 
    vat = $('#vat').val(); 
    total = parseInt((qty * rate) - dis) + parseInt(vat); 
    $('#total_amount').val(total||0); 
}