I'm trying to have a label which contains a balance change when a person enters a charge amount. So assume something like...
<table>
<tr>
<td class="remainingBudget"></td>
.
.
.
...and then....
<form>
<table>
<tr>
<td><input class="percentCommitment"></td>
<td><input class="totalAmount"></td>
.
.
.
The user will never touch the totalAmount form input, only percentCommitment, which will calculate totalAmount based on another value, which we don't need to worry about. I have the totalAmount input populating automatically on the keydown event of percentCommitment with something like this...
$(".percentCommitment").keyup(function() {
var commit = caluculatePercentCommitment() || 0;
var salary = getSalary();
var amount;
if (commit > 0 && salary > 0) {
ttl = (salary * commit) / 100;
} else {
amount = 0.00;
}
$(this).parent().find('.amountCommitment').val(amount);
});
This part is working fine and the total amount calculates correctly in real time as the person changes the percentCommitment value. This works because the value I multiply the percent commitment by, the person's annual salary, is static. It doesn't change. So if the person enters 1, 1% of salary is calculated and displayed. If the user then tacks on a 2, 12% is calculated from the same original salary, and this is exactly what I want to happen.
The problem comes with calculating the remaining budget in real time. Subtracting totalAmount from remainingBudget poses a problem, because if the user does the same thing, enters 1, then my jQuery does newRemainingBudget = remainingBudget - (0.01 * salary), which is fine, but then if they tack on a 2 I'm doing newNewRemainingBudget = newRemainingBudget - (0.12 * salary), which isn't what I want. I want all changes to be computed from the original remaining budget.
I was trying to do something like this...
$(".totalAmount").change(function (event) {
var remain = $(".remainingBudget").text();
remain = formatDecimalInput(remain);
var enter = $(".totalAmount).val();
enter = formatDecimalInput(enter);
if (enter <= remain) {
$(".remainingBudget")text((remain-enter).formatCurrency());
}
else {
// Do nothing
event.preventDefault();
}
});