如何通过jquery计算正确的总金额？

I have to calculate total amount by using below code.

我必须使用以下代码计算总金额。

<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>

It gives me right amount but after calculation if i change any amount other then vat my total amount not changing because script is not written for that.Please help me to do it update if any variable gets change.

它给了我正确的金额但是在计算之后如果我改变任何其他金额，那么我的总金额不会改变，因为脚本不是为此编写的。如果任何变量发生变化，请帮我做更新。

Thanks in advance.

提前致谢。

7 个解决方案

#1

To achieve this you just need to attach the function logic to the change event of all the input elements.

要实现这一点，您只需将函数逻辑附加到所有输入元素的change事件。

A much better way to do this would be to use unobtrusive event handlers instead of the outdated on* event attributes. As you've already included jQuery, you can use that.

更好的方法是使用不显眼的事件处理程序而不是过时的*事件属性。正如您已经包含jQuery，您可以使用它。

Also note that you should ideally use parseInt() or parseFloat() to convert the strings returned from val() to numerical values. Try this:

另请注意，理想情况下应使用parseInt（）或parseFloat（）将val（）返回的字符串转换为数值。尝试这个：

$('#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>

#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);

}

#3

You can try it.

你可以尝试一下。

<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>

#4

Hello you can do like this

你好，你可以这样做

<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>

You can call global function on each field so changing any value its re-calculate the total amount.

您可以在每个字段上调用全局函数，因此更改任何值都会重新计算总量。

#5

Give all your input fields the same class, and then use .change() to detect any change to any of these input fields and execute your calculation function.

为所有输入字段指定相同的类，然后使用.change（）检测对这些输入字段的任何更改并执行计算功能。

$('.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>

#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>

Call the function that you have now on input/type on input/text

在输入/文本上调用输入/输入的函数

#7

You can try my demo, hope this can help!

你可以尝试我的演示，希望这可以帮助你！

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);
}

#1