php - 使用 jQuery 计算插件自动计算表单字段值

Question

我正在构建一个表单，它会自动计算用户输入的值，最好使用 jQuery/javascript，我不知道如何做到这一点，但对所需的逻辑有一个大概的了解(我不是专家，所以请随意纠正我) - 我创建了一个虚拟图像来帮助解释我想要做什么。

/image/WScNO.png

我有一个表单，其中有许多输入字段，只要已选择每个表，就会自动计算每个表的总金额。 使用 jQuery - 我希望逻辑是这样的 - i) 查找输入字段元素 ii) 查找表中所有具有值的文本字段 iii) 将这些添加在一起并显示在“总计”表单字段中

虽然我对 PHP 很熟悉，但有时我仍然对 javascript 感到困惑 - 如果您能提供任何帮助，我将不胜感激，如果可能的话，请提供快速概述以帮助我从代码中学习。

提前致谢

Answer 1

试试这个: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;
}