使用javascript / JQuery计算自动填充输入的总和

时间:2017-03-18 09:33:40

标签: javascript jquery

我目前有三个输入字段,其中包含自动填充/自动计算值。这些值来自其他输入字段。

total_p1 = sum of input1 and input2  ||| 
total_p2 = sum of input3 and input4
total = total_p1 + total_p2

我需要添加total_p1total_p2的值。问题是除非我手动添加或更改任一输入框的值,否则不会计算。希望有效的自动填充解决方案。谢谢!

编辑:

total_p1的代码:

$('#input2').keyup(function(){
    var input1;
    var input2;

    input1 = parseFloat($('#input1').val());
    input2=  parseFloat($('#input2').val());

    var result = (input1 + input2);
    $("#total_p1").val(result);  
});

total_p2的代码:

$('#input4').keyup(function(){
    var input3;
    var input4;

    input3 = parseFloat($('#input3').val());
    input4=  parseFloat($('#input4').val());

    var result = (input3 + input4);
    $("#total_p2").val(result);  
});

总代码:

总:

total_p1的代码:

$('#total_p2').keyup(function(){
    var total_p1;
    var total_p2;

    total_p1= parseFloat($('#total_p1').val());
    total_p2=  parseFloat($('#total_p2').val());

    var result = (total_p+ total_p2);
    $("#total").val(result);  
});

1 个答案:

答案 0 :(得分:0)

将类input-fields-to-sum添加到源输入字段,然后:

$(document).ready(function() {
   calculateTotals();

    $(".input-fields-to-sum").on('input', function() {
        calculateTotals();
    });
});

function calculateTotals() {
   // walk on input fields with class, calculate sum and put it in total field
   // input can contain invalid numbers, handle errors when parsing
}

function parseNumber(str, defaultValue) {
    if (str !== undefined && str.length) {
        var parsed = parseFloat(str.replace(',','.').replace(/\s/g,'').replace(/\&nbsp\;/g,''));
        if (isNaN(parsed)) return defaultValue;
        return parsed;
    }
    return defaultValue;
}