adding commas to a monetary calculation

**Skinnybobb** · 04-26-2006, 10:54 AM

Hiya,
I've recently written some Javascript to calculate number of days between 2 dates and the amount of an overpayment using 2 rates and the number of days from the first part.

What I would really like when the OP calc is written to the field is the comma(s) being inserted automatically.

I.e. Instead of seeing 123456.78 it should show 123,456.78
My code for so far is:

Code:

<html>

<head>
<title>Date & Amount Calculator</title>

<script type="text/javascript">
function reformDate(dateString){
var dateAr=dateString.split('/')
return dateAr[1]+'/'+dateAr[0]+'/'+dateAr[2]
}

function calculation(form) {
var from = reformDate(form.fromDate.value);
var to = reformDate(form.toDate.value);
var date1 = new Date(from);
var date2 = new Date(to);
var one_day = 1000*60*60*24;

if (form.fromDate.value==null||form.fromDate.value.length<=9 || form.toDate.value==null||form.toDate.value.length<=9){

alert("\nPlease enter the dates correctly using the following format:\n\ndd/mm/yyyy");
return false;
}
	
//Calculate difference btw the two dates, and convert to days
form.numDays.value = (Math.ceil((date2.getTime()-date1.getTime() + one_day)/(one_day)));

var rate1 = form.oldRate.value;
var rate2 = form.newRate.value;
var rateDiff = rate2 - rate1;

diffPW = (rateDiff/7)*form.numDays.value;
form.Diff.value = Math.round(diffPW*100)/100;
}
</script>

</head>

<body>

<form name="myForm">
<table border="1" width="99%" bordercolor="#99B7F1" cellspacing="0">
  <tr>
    <td width="26%" bgcolor="#E6ECFB"><b>From Date</b></td>
    <td width="26%" bgcolor="#E6ECFB"><b>To Date</b></td>
    <td width="29%" bgcolor="#E6ECFB"><b>No. of Days Difference</b></td>
    <td width="19%" style="border: 1 solid #FFFFFF" rowspan="4" valign="middle" align="center"><img border="0" src="images/calc_blue.jpg" width="132" height="90"></td>
  </tr>
  <tr>
    <td width="26%"> <input type="text" name="fromDate" size="15" tabindex="1">
     <a href="javascript:showCal('Calendar1')"><img border="0" src="images/calendar_icon.gif" width="24" height="16" alt="Select Date"></a>    </td>
    <td width="26%"> <input type="text" name="toDate" size="15" tabindex="2">
     <a href="javascript:showCal('Calendar2')"><img border="0" src="images/calendar_icon.gif" width="24" height="16" alt="Select Date"></a>    </td>
    <td width="29%"> <input type="text" name="numDays" size="15">
    </td>
  </tr>
  <tr>
    <td width="26%" bgcolor="#E6ECFB"><b>Old Rate per week</b></td>
    <td width="26%" bgcolor="#E6ECFB"><b>New Rate per week</b></td>
    <td width="29%" bgcolor="#E6ECFB"><b>Amount Difference</b></td>
  </tr>
  <tr>
    <td width="26%"> <b>£ </b><input type="text" name="oldRate" value="0.00" size="13" tabindex="3">
    </td>
    <td width="26%"> <b>£ </b><input type="text" name="newRate" value="0.00" size="13" tabindex="4">
    </td>
    <td width="29%"> <b> £</b> <input type="text" name="Diff" size="13">
    </td>
  </tr>
</table>
<br>
<INPUT TYPE="button" VALUE="Calculate" onClick="calculation(this.form);" tabindex="5">
<INPUT TYPE="reset" tabindex="6">
</form>
    

</body>

</html>

A point in the right direction (or the complete script) would help.
Cheers
Mark

**Twey** · 04-26-2006, 03:08 PM

Code:

Number.prototype.withThousandsSeperator = function(sep) {
  var s = this.toString(),
    y = (s.indexOf(".") > -1 ? s.substring(s.indexOf(".")) : "");
  if(y) s = s.substring(0, s.indexOf("."));
  for(var i = s.length - 3;i > 0;i -= 3) {
    var front = s.substring(0, i),
      back = s.substring(i);
    s = front + sep + back;
  }
  return s + y;
}

Can handle any length of number and decimal. Returns a string containing the number with thousands seperator inserted. Usage:

Code:

var i = 500000000000.1567;
window.alert(i.withThousandsSeperator(","));

Thread: adding commas to a monetary calculation

Thread Tools

Search Thread

adding commas to a monetary calculation

Bookmarks

Bookmarks

Posting Permissions