[jQuery] Baffling input problem
Here's the scenario. I have a series of text inputs with a class of
'online', I want to update a total everytime an input with the class
of 'online' is changed. Basically like a spreadsheet doing an auto sum
on a column.
The total is put into two places, a div and a hidden input.
Here's the code I have:
$('.adcost').blur(function() {
var total = parseInt($('#adTotalInput').val()); // Get the current
value from the hidden input
console.log('Input: ' + $('#adTotalInput').val()); // Show the
current value from the hidden input
console.log('Total: ' + total); // Show the current total, make
sure its the same as our hidden input
total += parseInt($(this).val()); // Get the value of THIS input
and add it to our total
console.log('This: ' + $(this).val()); // Show the value of THIS
input
console.log('New Total: ' + total); // Show our new total
$('#adTotalInput').val(total); // Update the hidden input
console.log('Updated Input: ' + $('#adTotalInput').val()); // Get
the value from the hiddeninput
$('#adTotal').empty().text(total);
});
The first time a value is placed in an input.online everything is
fine, here's the output from console.log():
Total: 0
This: 200
New Total: 200
Updated Input: 200
Subsequent changes to any input.online results in:
Input: undefined
Total: NaN
This: 200
New Total: NaN
Updated Input: undefined
I'm baffled as to why input#adTotalInput is suddenly undefined. Any
help will be greatly appreciated.