Javascript: возврат связанного ввода, который является результатом предыдущего ввода

Question

Я новичок в Javascript, и у меня возникли проблемы с пониманием того, почему мое событие связывания не происходит.

У меня есть простая форма, которая будет добавлять и динамически обновлять субтитры и итоговые данные ввода.

Исходные данные для субтитров корректно, но единственный способ получить общую сумму - это вручную обновить (щелчок или запись чего-либо на одном из промежуточных итогов).

Мне нужно, чтобы итоговое значение обновлялось динамически.

Я использую «change keyup keydown paste» для итогового итога, а также промежуточные итоги. Я чувствую, что это моя проблема, но я не могу найти ответ.

Вот скрипку моей установки: http://jsfiddle.net/U8a8Y/

HTML:

1. Price: <input type='text' class='p1' value='0'>Rate: <input type='text' class='r1' value='0'>SUB TOTAL: <input type='text' class='tot1' value='0'><br> 
2. Price: <input type='text' class='p2' value='0'>Rate: <input type='text' class='r2' value='0'>SUB TOTAL: <input type='text' class='tot2' value='0'><br> 
3. Price: <input type='text' class='p3' value='0'>Rate: <input type='text' class='r3' value='0'>SUB TOTAL: <input type='text' class='tot3' value='0'><br> 

4.TOTAL: <input type='text' class='total' value='0'> 

JavaScript:

jQuery(function($) {  
    var p1 = $(".p1"); 
    var r1 = $(".r1"); 
    var tot1 = $(".tot1"); 

    var p2 = $(".p2"); 
    var r2 = $(".r2"); 
    var tot2 = $(".tot2"); 

    var p3 = $(".p3"); 
    var r3 = $(".r3"); 
    var tot3 = $(".tot3"); 

    var total = $(".total"); 
// SUB TOTAL 
    //1. 
    $([p1[0], r1[0]]).bind("change keyup keydown paste", function(e) { 
      var Result1; 
      Result1 = parseFloat(r1.val()) + parseFloat(p1.val()); 
      tot1.val(Result1); 
     }); 
    //2.  
    $([p2[0], r2[0]]).bind("change keyup keydown paste", function(e) { 
      var Result2; 
      Result2 = parseFloat(r2.val()) + parseFloat(p2.val()); 
      tot2.val(Result2); 
     }); 
    //3.  
    $([p3[0], r3[0]]).bind("change keyup keydown paste", function(e) { 
      var Result3; 
      Result3 = parseFloat(r3.val()) + parseFloat(p3.val()); 
      tot3.val(Result3); 
     }); 

    //4. MAIN TOTAL 
    $([tot1[0], tot2[0], tot3[0]]).bind("change keyup keydown paste", function(e) { 
      var Result4; 
      Result4 = parseFloat(tot1.val()) + parseFloat(tot2.val()) + parseFloat(tot3.val()); 
      total.val(Result4); 
    }); 

}); 

Любые намеки о том, почему это не работает было бы весьма признателен.

Answer 1

Вы можете определить функцию для вычисления общего количества и вызвать ее при вычислении суммарной суммы. Ниже запроса:

jQuery(function($) { 
    // input variables go here 

    var p1 = $(".p1"); 
    var r1 = $(".r1"); 
    var tot1 = $(".tot1"); 

    var p2 = $(".p2"); 
    var r2 = $(".r2"); 
    var tot2 = $(".tot2"); 

    var p3 = $(".p3"); 
    var r3 = $(".r3"); 
    var tot3 = $(".tot3"); 

    var total = $(".total"); 
// SUB TOTAL 
    //1. 
    $([p1[0], r1[0]]).bind("change keyup keydown paste", function(e) { 
      var Result1; 
      Result1 = parseFloat(r1.val()) + parseFloat(p1.val()); 
      tot1.val(Result1); 
      calculateTotal(); 
     }); 
    //2.  
    $([p2[0], r2[0]]).bind("change keyup keydown paste", function(e) { 
      var Result2; 
      Result2 = parseFloat(r2.val()) + parseFloat(p2.val()); 
      tot2.val(Result2); 
      calculateTotal(); 
     }); 
    //3.  
    $([p3[0], r3[0]]).bind("change keyup keydown paste", function(e) { 
      var Result3; 
      Result3 = parseFloat(r3.val()) + parseFloat(p3.val()); 
      tot3.val(Result3); 
     calculateTotal(); 
     }); 
// function to calculate total 
var calculateTotal = function() 
{ 
    var Result4; 
      Result4 = parseFloat(tot1.val()) + parseFloat(tot2.val()) + parseFloat(tot3.val()); 
      total.val(Result4); 
} 
}); 

DEMO