Javascript 使用 jQuery 计算插件自动计算表单字段值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4615655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto Calculate form fields value using jQuery calculation plugin
提问by Lee
I am building a form that will automatically calculate the values entered by a user ideally using jQuery/javascript, i am not sure how to do this but have a general idea of the logic required (i am no expert so feel free to correct me) - I have created a dummy image to help explain what I am trying to do.
我正在构建一个表单，该表单将自动计算用户理想情况下使用 jQuery/javascript 输入的值，我不确定如何执行此操作，但对所需的逻辑有一个大致的了解（我不是专家，因此请随时纠正我） - 我创建了一个虚拟图像来帮助解释我想要做什么。
http://i.stack.imgur.com/WScNO.png
http://i.stack.imgur.com/WScNO.png
I have a single form, which has many input fields automatically calculate the total amount for each table provided it has been selected. Using jQuery - I would expect the logic to be something like - i) Find the input field element ii) Find all the text fields within the table that have a value iii) Add these together and display in the 'total' form field
我有一个表单，它有许多输入字段，只要它被选中，就会自动计算每个表的总金额。使用 jQuery - 我希望逻辑类似于 - i) 查找输入字段元素 ii) 查找表中具有值的所有文本字段 iii) 将它们加在一起并显示在“总计”表单字段中
While i'm ok on the PHP, javascript is something I still get confused with at times - I would appreciate any help on doing this, and if possible a quick overview to help me learn from the code.
虽然我对 PHP 没问题，但有时我仍然对 javascript 感到困惑 - 我很感激在这方面的任何帮助，如果可能的话，快速概述可以帮助我从代码中学习。
Thanks in advance
提前致谢
回答by Lee
Try this:http://jsfiddle.net/Ajkkb/26/
试试这个：http: //jsfiddle.net/Ajkkb/26/
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value=""/>
<input name="p" class="pack" type="text" maxlength="255" size="5" value=""/>
<input name="b" class="bag" type="text" maxlength="255" size="5" value=""/>
<input name="w" class="weight" type="text" maxlength="255" size="5" value=""/>
<span class="amount"></span>
</div>
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value=""/>
<input name="p" class="pack" type="text" maxlength="255" size="5" value=""/>
<input name="b" class="bag" type="text" maxlength="255" size="5" value=""/>
<input name="w" class="weight" type="text" maxlength="255" size="5" value=""/>
<span class="amount"></span>
</div>
<div>
<input name="r" class="rate" type="text" maxlength="255" size="5" value=""/>
<input name="p" class="pack" type="text" maxlength="255" size="5" value=""/>
<input name="b" class="bag" type="text" maxlength="255" size="5" value=""/>
<input name="w" class="weight" type="text" maxlength="255" size="5" value=""/>
<span class="amount"></span>
</div>
<div class="total_amount">total</div>
$(document).ready(function() {
$('input[name=r],input[name=p]').change(function(e) {
var total = 0;
var $row = $(this).parent();
var rate = $row.find('input[name=r]').val();
var pack = $row.find('input[name=p]').val();
total = parseFloat(rate * pack)*100;
//update the row total
$row.find('.amount').text(total);
var total_amount = 0;
$('.amount').each(function() {
//Get the value
var am= $(this).text();
console.log(am);
//if it's a number add it to the total
if (IsNumeric(am)) {
total_amount += parseFloat(am, 10);
}
});
$('.total_amount').text(total_amount);
});
});
//isNumeric function Stolen from:
//http://stackoverflow.com/questions/18082/validate-numbers-in-javascript-isnumeric
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}
