0

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

user3750907
  • 11
  • 1
  • 1
  • 7
  • You haven't asked a question. – zerkms Mar 12 '15 at 20:55
  • I would suggest setting up a jsbin or jsfiddle example for your problem. – TheDude Mar 12 '15 at 20:55
  • 2
    possible duplicate of [Format number string using commas](http://stackoverflow.com/questions/10810497/format-number-string-using-commas) – TheDude Mar 12 '15 at 20:56
  • 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 Mar 12 '15 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 Mar 12 '15 at 21:09

3 Answers3

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

steezeburger
  • 570
  • 3
  • 15
  • 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? – user3750907 Mar 12 '15 at 21:19
  • 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 – steezeburger Mar 12 '15 at 21:40
  • Thanks for your help seteezeburger, do you know how I would go about doing so? I'm completely lost when it comes to Javascript. – user3750907 Mar 13 '15 at 09:46
  • @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 Mar 13 '15 at 12:38
  • @user3750907 I said to add it AFTER the numbersWithComma function declaration. You completely removed it. Here is a working snippet: http://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. – steezeburger Mar 13 '15 at 14:23
  • I've added this and still no luck? Really not sure what I'm doing wrong :S Link -> http://freelance.tstwebdesign.co.uk/tyco/ – user3750907 Mar 17 '15 at 09:15
0

function numberWithCommas(x) {
    return x.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}
lem2802
  • 1,152
  • 7
  • 18
-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')
andalm
  • 81
  • 6