Link to home
Start Free TrialLog in
Avatar of axessJosh
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.
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);
	}
  }

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?
ASKER CERTIFIED SOLUTION
Avatar of WebDevEM
WebDevEM
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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!)
Avatar of axessJosh
axessJosh

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?
In JS it could be document.getElementById("DepositSum").value=(Total);
where DepositSum is the ID of your labeled input.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Awesome!  works great.

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

$("#DepositSum").val(formatCurrency(add));

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

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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)" ?
overlooked the new function added at the top of the JSFiddle file.

Great piece of code.  Thanks!