Need to strip non-digits from input values when adding together

I have a few input fields all with the class .reconcost
As shown below, on blur, the total values of the fields are added together and changes the value of a div's span '#recon span'

All works well. Ideally though I'm using some masked input to show a dollar sign and format the value of each field while you type like this:

Instead of 4588 in the input field, the masking makes it look like:
$ 4,588

So my addition fails because of the dollar sign, comma etc.

My question would be:
How can I leave the masking in so the numbers look nice, but strip all away when doing the addition below. THEN, when it sets the value in my #recon span, it would be great to put in a comma where appropriate ie: 4,588 if that was the total for my div (I have a static dollar sign in already just before the div so don't need to insert that again).

<script type="text/javascript">
$(".reconcost").live("blur", function() {
    var sum = 0;
    $('.reconcost').each(function() {
    sum += Number($(this).val());
    });
$("#recon span").text(sum);
});
</script>

Open in new window


Thanks in advance as always.
LVL 1
tjyoungAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
<script type="text/javascript">
$(".reconcost").live("blur", function() {
    var sum = 0;
    $('.reconcost').each(function() {
    amount=$(this).val()
    sum += Number(amount.replace(/[^0-9\.]+/g,""))
    });
$("#recon span").text(sum);
});
</script> 

Open in new window

This will replace everything that is not a number or period with nothing.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
tjyoungAuthor Commented:
Thats awesome. Lastly any idea how I can insert a comma into the 'sum' result where appropriate?
0
GaryCommented:
Will the decimal be any greater than 2 places? If so this will fail and I'll have to look again
My regex is not great beyond the basic stuff.

reformatted = sum.toString().replace(/(\d)(?=(\d){3})/g, "$1,");

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

tjyoungAuthor Commented:
HI,
Doesn't seem to work. I won't have more than 2 decimals, so OK there.
If I was to enter initially : 344

I get: $0,3,4,4,000

I don't need the dollar sign if that helps. If I add another value, its gets worse.

I could be implementing the additional code wrong though. This is what I'm using..
<script type="text/javascript">
$(".reconcost").live("blur", function() {
var sum = 0;
$('.reconcost').each(function() {
amount=$(this).val()
sum += Number(amount.replace(/[^0-9\.]+/g,""))
sum = sum.toString().replace(/(\d)(?=(\d){3})/g, "$1,");
});
$("#recon span").text(sum);
});
</script> 

Open in new window

0
GaryCommented:
You have the reformatting inside your for each, it should be outside.
0
tjyoungAuthor Commented:
Its much closer.
Getting: $2,3,444 when I enter 234444

<script type="text/javascript">
$(".reconcost").live("blur", function() {
var sum = 0;
$('.reconcost').each(function() {
amount=$(this).val()
sum += Number(amount.replace(/[^0-9\.]+/g,""))
});
sum = sum.toString().replace(/(\d)(?=(\d){3})/g, "$1,");
$("#recon span").text(sum);
});
</script> 

Open in new window

0
tjyoungAuthor Commented:
Works well if my numbers are under 9999 or less.
I believe they would be but I'm not 100% sure. Not the end of the world if its not doable. Its doubtful their reconditioning would be over 10,000.
0
GaryCommented:
Ok give me a few mins will have test, I didn't check larger numbers
0
tjyoungAuthor Commented:
I got it from your example and another one. Thanks for your help!
Looks like this:
<script type="text/javascript">
$(".reconcost").live("blur", function() {
var sum = 0;
$('.reconcost').each(function() {
amount=$(this).val()
sum += Number(amount.replace(/[^0-9\.]+/g,""))});
sum = sum.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
$("#recon span").text(sum);
});
</script>

Open in new window

0
GaryCommented:
Ok great ;o)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.