asked on

Adding thousands comma separator to Javascript code

Hi there

Could anyone please assist with code below. I want the results to come up with thousands comma separator (i.e. 10,000) with no decimal places. I have found various bits of code but I have no idea how to implement them. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<link href="/style.css" rel="stylesheet" type="text/css" />
<title>Calc amounts</title>
<script type="text/javascript">
function figure(frm) {
var num1 = IsNum(frm.val1.value);
var num2 = IsNum(frm.val2.value);
var num3 = IsNum(frm.val3.value);
var num4 = IsNum(frm.val4.value);
var num5 = IsNum(frm.val5.value);
var str1 = "The figure we calculate is $";
var total1 = num1 + num2 + num3 + (2 * num4) + (2 * num5);
var str2 = "<br>The alternative figure we calculate is $";
var total2 = num1 + num2 + num3 + num4 + num5;
document.getElementById('figure').innerHTML = str1 + total1.toFixed(0)+
str2 + total2.toFixed(0);
}
function IsNum(val) {
val = parseInt(val,10);
return (val == '' || isNaN(val))? 0 : val;
}
</script>
</head>

<body>
<h3>Let's figure it</h3>

<form name="form1" action="" method="post">
<input type="text" name="val1" size="3" /> + <input type="text" name="val2" size="3" /> + <input type="text" name="val3" size="3" /> + (2 x <input type="text" name="val4" size="3" />) + (2 x <input type="text" name="val5" size="3" />) =
<br /><br />
<input type="button" value="Calc" onclick="figure(this.form);" />
</form>

<div id="figure"></div>

</body>
</html>

HonorGod

http://feather.elektrum.org/appendix/number-ext.html

James Rodgers

smething like this, takes a number and adds thousands and decimals if specified, currently formatted for french style

<script>
function FormatWithDecimals (n,decimals) {
      decimals=(decimals>=0?decimals:2)
var t = Math.floor(n*Math.pow(10,decimals)+0.5).toString();
while (t.length < decimals+1) t = "0"+t;
      var i = t.length-decimals;
      if(decimals)
      t = t.substr(0,i)+","+t.substr(i); // insert decimal separator (a dot or comma)
for (i -= 3; i > 0; i -= 3)
            t = t.substr(0,i)+"."+t.substr(i); // insert thousands separators (commas or dots)
return t;
}

      alert(FormatWithDecimals (123456789));
      alert(FormatWithDecimals (1234567.89,2));
      alert(FormatWithDecimals (123456789,0));
</script>

ASKER CERTIFIED SOLUTION

js_vaughan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

js_vaughan

Also, using your current methods, all the decimals are being dropped before any math is being done. so even if someone were to put "0.5" in for the last two (X2) blocks... that should equal an extra 2 dollars... If this is on purpose, disregard this comment. Otherwise, if you just want to remove the decimals at the end I recommend:

// replace parseInt with parseFloat
function IsNum(val) {
val = parseFloat(val,10);
return (val == '' || isNaN(val))? 0 : val;
}

// Round your dollars and comma-format before output
document.getElementById('figure').innerHTML = str1 + addCommas(Math.round(total1)) + str2 + addCommas(Math.round(total2));

dvsuk

ASKER

js_vaughan - Spot on. Thank you!