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.
function formatCurrency(num) {
	num = num.toString().replace(/\$|\,/g,'');
	  num = "0";
	sign = (num == (num = Math.abs(num)));
	num = Math.floor(num*100+0.50000000001);
	cents = num%100;
	num = Math.floor(num/100).toString();
	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))+','+
	if (num =="0") {
		return(" ");
	} else {
	return (((sign)?'':'-') + '$' + num + '.' + cents);

Open in new window

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);

Open in new window

any suggestions?
Who is Participating?

Improve company productivity with a Business Account.Sign Up

WebDevEMConnect With a Mentor Commented:

I've made a quick jsFiddle that should be what you're looking for...

I hope this helps!

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!)
axessJoshAuthor Commented:
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?
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

In JS it could be document.getElementById("DepositSum").value=(Total);
where DepositSum is the ID of your labeled input.
WebDevEMConnect With a Mentor Commented:
Yep, that would work in pure JS.  The jQuery version would be

Open in new window

(I've updated the jsFiddle as well, if you want to tinker with it)
axessJoshAuthor Commented:
Awesome!  works great.

I made a slight addition to the jQuery to format the number into currency.


Open in new window

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>

Open in new window

WebDevEMConnect With a Mentor Commented:
Okay... that one took a little playing with to get what I think you're looking for.  (Plus jsFiddle is very slow for me today for some reason)

I've updated the fiddle at to format the text box as you leave it, and remove the $ and , when you enter, leaving just numbers and decimal points to edit.  Those are the blur and focus sections of code.
axessJoshAuthor Commented:
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.
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)" ?
axessJoshAuthor Commented:
overlooked the new function added at the top of the JSFiddle file.

Great piece of code.  Thanks!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.