axessJosh
asked on
autmatically add input values as entered
I'm creating a deposit form
I just completed getting it setup to add a new row. Now I'd like it to auto-sum the input fields. I won't know a set number of how many fields there will be as the user can add rows as necessary.
Another hiccup is that I am using another function in the field to auto populate a dollar sign as well as the comma and period necessary to confirm the amount.
Here is the code I found to add the fields, but it only does it when a button is clicked. It also can't handle the function formatCurrency() as shown above.
any suggestions?
I just completed getting it setup to add a new row. Now I'd like it to auto-sum the input fields. I won't know a set number of how many fields there will be as the user can add rows as necessary.
Another hiccup is that I am using another function in the field to auto populate a dollar sign as well as the comma and period necessary to confirm the amount.
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*i+3));
if (num =="0") {
return(" ");
} else {
return (((sign)?'':'-') + '$' + num + '.' + cents);
}
}
Here is the code I found to add the fields, but it only does it when a button is clicked. It also can't handle the function formatCurrency() as shown above.
$(function() {
$("#btn1").click(function() {
var add = 0;
$(".test").each(function() {
add += Number($(this).val());
});
$("#para").text("Sum of all textboxes is : $" + add);
});
});
any suggestions?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Oh, and if you're allowing new rows to be created after the page is loaded you may want to look at either .on() or .live() depending on which version of jQuery you're using. Otherwise the new <input> boxes won't trigger your tally formula. Or you can un-bind and re-bind the click function every time a new input is created but that's not the smoothest way. (Still works, though!)
ASKER
works great, Thanks.
Just realized one piece that I'd like to adjust that I didn't mention in the question.
I'd like to total to tally in an input box labeled "total deposit" so that I can INSERT that into a table for deposits. Can you show me how to adjust?
Just realized one piece that I'd like to adjust that I didn't mention in the question.
I'd like to total to tally in an input box labeled "total deposit" so that I can INSERT that into a table for deposits. Can you show me how to adjust?
In JS it could be document.getElementById("D epositSum" ).value=(T otal);
where DepositSum is the ID of your labeled input.
where DepositSum is the ID of your labeled input.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Awesome! works great.
I made a slight addition to the jQuery to format the number into currency.
Only thing that I cannot get to work now is the formatCurrency on the input fields. I need this to be sure the user gets the decimal point in the correct place.
its currently:
I made a slight addition to the jQuery to format the number into currency.
$("#DepositSum").val(formatCurrency(add));
Only thing that I cannot get to work now is the formatCurrency on the input fields. I need this to be sure the user gets the decimal point in the correct place.
its currently:
<input type="text" value="" name="lineAmount[]" class="test" id="lineAmount" onChange="formatCurrency(this)"></input>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
that helps for the inputs, i did change the code a bit to get the inputs as their class, rather than just general input.
Here's the issue now.
when i enter on the first line, it sums fine, however when i tab off that field, it removes the sum total in the box.
when i add a row, then enter a value it works fine, but doesn't validate the number. The sum still works though.
Here's the issue now.
when i enter on the first line, it sums fine, however when i tab off that field, it removes the sum total in the box.
when i add a row, then enter a value it works fine, but doesn't validate the number. The sum still works though.
Can you post your html and javascript code, or share the URL to the page if it's visible to the outside world? It sounds like you just missed a reference when you changed the code to look at the classes, since it was working before that. (I'm assuming my jsFiddle works as you wanted it, and the problem is with your copy. If mine doesn't work for you, we can look at that too)
First place I'd look is in the blur and focus lines. Oh, which reminds me... did you copy the new function "formatNumber(myStr)" ?
First place I'd look is in the blur and focus lines. Oh, which reminds me... did you copy the new function "formatNumber(myStr)" ?
ASKER
overlooked the new function added at the top of the JSFiddle file.
Great piece of code. Thanks!
Great piece of code. Thanks!