Add comma to numbers with Javascript not working

Question

I've tried everything to automatically add comma separators (every thousand/hundred thousand etc) to a number that is automatically generated via a form.

I've tried:

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}


$('span#ninja_forms_field_83').each(function(){
var v_pound = $(this).html();
v_pound = numberWithCommas(v_pound);

$(this).html(v_pound)

    })
});//]]>  

</script>

But it's not working at all.

A link to the form is: http://freelance.tstwebdesign.co.uk/tyco/ You can see the value at the bottom change when you select different values.

Thanks in advance

I would suggest setting up a jsbin or jsfiddle example for your problem. — TheDude
– TheDude, Commented Mar 12, 2015 at 20:55
You're creating numberWithCommas inside the load function, so once that function is finished, numberWithCommas is out of scope and undefined. create that function outside of the load function. — James Sutherland
– James Sutherland, Commented Mar 12, 2015 at 21:02
The question was, what am I doing wrong? I found that snippet on a forum but it's not working for me. I'm definitely not the best at Javascript so if anyone has any suggestions on what I have done wrong I would appreciate it. How would I create the function outside of the load function? — user3750907
– user3750907, Commented Mar 12, 2015 at 21:09

steezeburger · Accepted Answer · 2015-03-12 21:55:16Z

1

I don' think you need the .each();

v_pound = $('span#ninja_forms_field_83').html();
v_pound = numberWithCommas(v_pound);
$('span#ninja_forms_field_83').html(v_pound);

see: http://jsfiddle.net/oqm0zrL1/

jQuery's each() iterates over an array. In your case, it's just a string!

Edit: There might also be an issue with how you declare your function and the scopes.

Edit2: You need to add an eventHandler to each input's .change(). Something like:

$('input').change(function() {
  v_pound = $('span#ninja_forms_field_83').html();
  v_pound = numberWithCommas(v_pound);
  $('span#ninja_forms_field_83').html(v_pound);
});

Now, you can't use .change() on forms directly, so your selector needs to select all checkboxes and inputs. $('input') should work.

To be a little more explicit, I would use $('#ninja_forms_form_1 input')

edited Mar 12, 2015 at 21:55

answered Mar 12, 2015 at 21:08

steezeburger

5803 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3750907 Over a year ago

I've tried that and it's still not working unfortunately. I'm not sure whether there's another error or something conflicting with it?

steezeburger Over a year ago

You need to put the code inside an eventHandler that is triggered on the form's change. Something like: $('#form').change(function() { // dom manipulation here } }); Now, you can't use .change() on forms directly, so you may need to add it to every input or checkbox. I would add a class to each input or form and use that as your selector instead of the form's #id

user3750907 Over a year ago

Thanks for your help seteezeburger, do you know how I would go about doing so? I'm completely lost when it comes to Javascript.

steezeburger Over a year ago

@user3750907 Put the second snippet I wrote inside the script tag after you declare the numbersWithComma function. See if that works. I'll update my answer when I get to work with the proper way.

steezeburger Over a year ago

@user3750907 I said to add it AFTER the numbersWithComma function declaration. You completely removed it. Here is a working snippet: jsfiddle.net/cp5zacg0 You'll notice, whenever you click a checkbox, commas are added. This is because it's calling the numbersWithComma function on the string whenever an input changes.

|

lem2802 · Accepted Answer · 2015-03-12 21:01:46Z

0

function numberWithCommas(x) {
    return x.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

answered Mar 12, 2015 at 21:01

lem2802

1,1627 silver badges18 bronze badges

Comments

andalm · Accepted Answer · 2015-03-15 18:13:05Z

-1

I do think that you must a library because it's done and is much better. Look at this documentation numeraljs

You must include in the browser

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>

if you want format any number, is very easy

numeral(1000000).format('0,0')

edited Mar 15, 2015 at 18:13

answered Mar 12, 2015 at 21:05

andalm

816 bronze badges

Collectives™ on Stack Overflow

Add comma to numbers with Javascript not working

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related