By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,668 Members | 1,404 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,668 IT Pros & Developers. It's quick & easy.

Dollar Format

chunk1978
100+
P: 224
hey there...

i'm trying to format a 6 digit dollar amount to include a comma ($1,240) and a period ($1,240.50)... i have the period solved thru:

form.total.value = number.toFixed(2);

but how is it possible to add a comma in a dollar amount that is over one thousand dollars?
Feb 3 '07 #1
Share this Question
Share on Google+
9 Replies

acoder
Expert Mod 15k+
P: 16,027
See this page. It should be what you want. They also have an advanced NumberFormat object which offers complex number formatting.
Feb 3 '07 #2

chunk1978
100+
P: 224
this doesn't seem to work... what am i doing wrong?

Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  3. <title>Untitled Document</title>
  4. <script type="text/javascript">
  5. function addCommas(nStr)
  6.     {
  7.     nStr += '';
  8.     x = nStr.split('.');
  9.     x1 = x[0];
  10.     x2 = x.length > 1 ? '.' + x[1] : '';
  11.     var rgx = /(\d+)(\d{3})/;
  12.     while (rgx.test(x1)) {
  13.         x1 = x1.replace(rgx, '$1' + ',' + '$2');
  14.     }
  15.     return x1 + x2;
  16. }
  17. </script>
  18. </head>
  19.  
  20. <body>
  21. <label>
  22. <input type="text" name="textfield" onBlur="addCommas(this.nStr);">
  23. </label>
  24. </body>
  25. </html>
  26.  
Feb 3 '07 #3

acoder
Expert Mod 15k+
P: 16,027
It won't work because the input object has no attribute nStr. You have to pass the value:
Expand|Select|Wrap|Line Numbers
  1. onBlur="addCommas(this.value);"
Feb 3 '07 #4

chunk1978
100+
P: 224
It won't work because the input object has no attribute nStr. You have to pass the value:
Expand|Select|Wrap|Line Numbers
  1. onBlur="addCommas(this.value);"
this doesn't work either...

Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  3. <title>Untitled Document</title>
  4. <script type="text/javascript">
  5. function addCommas(nStr)
  6.     {
  7.     nStr += '';
  8.     x = nStr.split('.');
  9.     x1 = x[0];
  10.     x2 = x.length > 1 ? '.' + x[1] : '';
  11.     var rgx = /(\d+)(\d{3})/;
  12.     while (rgx.test(x1)) {
  13.         x1 = x1.replace(rgx, '$1' + ',' + '$2');
  14.     }
  15.     return x1 + x2;
  16. }
  17. </script>
  18. </head>
  19.  
  20. <body>
  21. <label>
  22. <input type="text" name="textfield" onBlur="addCommas(this.value);">
  23. </label>
  24. </body>
  25. </html>
  26.  
i don't think i clearly understand yet when the event handeler (?i think that's what it's called) calls a functions.... like i usually match "();" with "()", and "(this.form);" with "(form)" and "(this.value);" with "(val)"... i'm sure i missed something along with way of learning javascript...
Feb 3 '07 #5

acoder
Expert Mod 15k+
P: 16,027
You need to set the value too:
Expand|Select|Wrap|Line Numbers
  1. onBlur="this.value=addCommas(this.value);"
Although it shouldn't affect the input box display, you should include it within form tags.
Feb 4 '07 #6

chunk1978
100+
P: 224
ok that worked... thanks...

one last question concerning this issue... is it possible to combine the AddCommas function to another one instead of using the onChange event handeler? the reason is because the number text fields are generated by select menus, not by actual typing input... i realize i could just add onChange event handlers to the select menus, but i think i'd prefer combine the two functions, to make the code tighter (i guess?)... plus it would be nice to learn :-)

i would like to combine the following two functions... and have the AddCommas function work for the:

A) form.invoicesubtotal.value
B) form.total2.value

Expand|Select|Wrap|Line Numbers
  1. function InvoiceSubtotalTaxTotal(form)
  2.     {
  3.     var a = (form.assignmentinvoice.value != '') ? eval(form.assignmentinvoice.value) : 0;
  4.     var b = (form.printinginvoice.value != '') ? eval(form.printinginvoice.value) : 0;
  5.     var invoicesubtotalVAR = a + b;
  6.     form.invoicesubtotal.value = '$' + invoicesubtotalVAR.toFixed(2) + ' CAD';
  7.     var SubTotal =  invoicesubtotalVAR;
  8.     var GST = SubTotal * 0.06;
  9.     form.gst.value = GST.toFixed(2);
  10.     var QST = (SubTotal + GST) * 0.075;
  11.     form.qst.value = QST.toFixed(2);
  12.     var Shipping = (form.shippinginvoice.value != '') ? eval(form.shippinginvoice.value) : 0;
  13.     form.shippinginvoice.value = Shipping.toFixed(2);
  14.     var TOTAL = SubTotal + GST + QST + Shipping;
  15.     form.total2.value = '$' + TOTAL.toFixed(2) + ' CAD';
  16. }
  17.  
  18. function addCommas(nStr)
  19.     {
  20.     nStr += '';
  21.     x = nStr.split('.');
  22.     x1 = x[0];
  23.     x2 = x.length > 1 ? '.' + x[1] : '';
  24.     var rgx = /(\d+)(\d{3})/;
  25.     while (rgx.test(x1)) {
  26.         x1 = x1.replace(rgx, '$1' + ',' + '$2');
  27.     }
  28.     return x1 + x2;
  29. }
  30.  
Feb 4 '07 #7

acoder
Expert Mod 15k+
P: 16,027
Keep both functions separate (easier to read, better modularity, one task- one function, general functions can be used in other places too, etc.)

Call the addCommas function from within the InvoiceSubtotalTaxTotal function, e.g. on total2:
Expand|Select|Wrap|Line Numbers
  1. form.total2.value = '$' + addCommas(TOTAL.toFixed(2)) + ' CAD';
Feb 5 '07 #8

chunk1978
100+
P: 224
Keep both functions separate (easier to read, better modularity, one task- one function, general functions can be used in other places too, etc.)

Call the addCommas function from within the InvoiceSubtotalTaxTotal function, e.g. on total2:
Expand|Select|Wrap|Line Numbers
  1. form.total2.value = '$' + addCommas(TOTAL.toFixed(2)) + ' CAD';
great! works perfectly... thanks again acoder :-)
Feb 5 '07 #9

acoder
Expert Mod 15k+
P: 16,027
No problem, you're welcome.
Feb 5 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.