Обновление div с jQuery после ввода данных

Question

У меня есть форма с четырьмя элементами ввода текста. Каждый раз, когда один из них обновляется, я хочу, чтобы сумма четырех текстовых полей ввода отображалась в div ниже, без нажатия пользователем кнопки. Вот то, что я до сих пор (я получил идею от here [делает это только работу с выбором?]):

var getSum = function() { 
    var email = $('#emailDown').val(); 
    var internet = $('#internetDown').val(); 
    var server = $('#serverDown').val(); 
    var desktop = $('#pcDown').val(); 
    //TODO:Check for integers (not needed with sliders) 
    var sum = email + internet + server + desktop; 
    $('totalHoursDown').html(sum); 
} 
$('#emailDown').change(getSum(event)); 
$('#internetDown').change(getSum(event)); 
$('#serverDown').change(getSum(event)); 
$('#pcDown').change(getSum(event)); 

В настоящее время, это не обновление. (Не беспокойтесь о проверке). Я новичок в PHP, поэтому не уверен, что я должен использовать его в этом экземпляре.

Answer 1

Вы пропускаете # или . в вашем селекторе, в зависимости от того, если totalHoursDown класс или ID:

$('totalHoursDown').html(sum); 

// Should be this if ID 
$('#totalHoursDown').html(sum); 
// or this if class 
$('.totalHoursDown').html(sum); 

Update:

Я изменил код, jmar777 бит, чтобы заставить его работать. Попробуйте вместо этого:

$(function(){ 
    var $fields = $('#emailDown, #internetDown, #serverDown, #pcDown'), 
    $totalHoursDown = $('#totalHoursDown'); 
    $fields.change(function() { 
     var sum = 0; 
     $fields.each(function() 
       { 
        var val = parseInt($(this).val(), 10); 
        sum += (isNaN(val)) ? 0 : val; 
       }); 
     $totalHoursDown.html(sum); 
    }); 
}); 

Вот рабочая скрипку, а также: http://jsfiddle.net/mSqtD/

Answer 2

Попробуйте это:

var $fields = $('#emailDown, #internetDown, #serverDown, #pcDown'), 
    $totalHoursDown = $('#totalHoursDown'); 
$fields.change(function() { 
    var sum = 0; 
    $fields.each(function() { sum += $(this).val(); }); 
    $totalHoursDown.html(sum); 
}); 

Кроме того, в вашем примере, вы имели $('totalHoursDown').html(sum);, который я предполагаю, ($('#totalHoursDown').html(sum);.