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

Currency format in textboxes

P: 17
Am new to javascript.
I need to format the currency in the as numbers are entered in textboxes. I can format the currency in the calculations and display in the totals but can not figure out how to format in input textboxes.


[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript" type="text/javascript">
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. function addthem() {
  2.     //ADD FIRST INPUT VALUE
  3.  
  4.     var add1 = document.addem.input1.value
  5.     var add1 = parseFloat(add1, 10)
  6.     add1 = (isNaN(add1))?0:add1;
  7.  
  8.  
  9.     //ADD SECOND INPUT VALUE
  10.     var add2 = document.addem.input2.value
  11.     var add2 = parseFloat(add2, 10)
  12.     add2 = (isNaN(add2))?0:add2;
  13.  
  14.     //ADD THIRD INPUT VALUE
  15.     var add3 = document.addem.input3.value
  16.     var add3 = parseFloat(add3, 10)
  17.     add3 = (isNaN(add3))?0:add3;
  18.  
  19.     //ADD FOURTH INPUT VALUE
  20.     var add4 = document.addem.input4.value
  21.     var add4 = parseFloat(add4, 10)
  22.     add4 = (isNaN(add4))?0:add4;
  23.  
  24.     //ADD FIFTH INPUT VALUE
  25.     var add5 = document.addem.input5.value
  26.     var add5 = parseFloat(add5, 10)
  27.     add5 = (isNaN(add5))?0:add5;
  28.  
  29.     //ADD SIXTH INPUT VALUE
  30.     var add6 = document.addem.input6.value
  31.     var add6 = parseFloat(add6, 10)
  32.     add6 = (isNaN(add6))?0:add6;
  33.  
  34.  
  35.     //ADD THEM TOGETHER
  36.     return eval(add1) + eval(add2) + eval(add3) + eval(add4) + eval(add5) + eval(add6);
  37.  
  38. }
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49. function addthem2() {
  50.     //ADD FIRST INPUT VALUE
  51.     var add7 = document.addem.input7.value
  52.     var add7 = parseFloat(add7, 10)
  53.     add7 = (isNaN(add7))?0:add7;
  54.  
  55.  
  56.     //ADD SECOND INPUT VALUE
  57.     var add8 = document.addem.input8.value
  58.     var add8 = parseFloat(add8, 10)
  59.     add8 = (isNaN(add8))?0:add8;
  60.  
  61.     //ADD THIRD INPUT VALUE
  62.     var add9 = document.addem.input9.value
  63.     var add9 = parseFloat(add9, 10)
  64.     add9 = (isNaN(add9))?0:add9;
  65.  
  66.     //ADD FOURTH INPUT VALUE
  67.     var add10 = document.addem.input10.value
  68.     var add10 = parseFloat(add10, 10)
  69.     add10 = (isNaN(add10))?0:add10;
  70.  
  71.     //ADD THEM TOGETHER
  72.     return eval(add7) + eval(add8) + eval(add9) + eval(add10);
  73.  
  74. }
  75.  
  76. //FUNCTION WILL PARSE THE TOTAL AS DOLLAR FORMAT
  77. function dollarformat(num) {
  78.     num = num.toString().replace(/\$|\,/g,'');
  79.     if(isNaN(num)) num = "0";
  80.         cents = Math.floor((num*100+0.5)%100);
  81.         num = Math.floor((num*100+0.5)/100).toString();
  82.     if(cents < 10) cents = "0" + cents;
  83.         for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
  84.             num = num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));
  85.     return ('$' + num + '.' + cents);
  86. }
  87.  
  88. //CALCUATES THE ADD/SUBTRACT VALUES
  89. function calculate() {
  90.     var x = addthem()
  91.    var y = addthem2()            
  92.  
  93.  if(x>y) {
  94.     max = x-y
  95.     document.addem.answer3.value = dollarformat(max)
  96.    }
  97.  
  98.  if(x<y) {
  99.     max = dollarformat(y-x)
  100.     max = "-" + max
  101.     document.addem.answer2.value = max    
  102.    }
  103.  
  104.   if (x==y) {
  105.     max = x-y
  106.     document.addem.answer3.value = dollarformat(max)
  107.    }  
  108. }
  109.  
  110. function addition() {
  111.     document.addem.answer.value = addthem()
  112.     document.addem.answer.value = dollarformat(document.addem.answer.value)
  113.  
  114.     calculate()
  115.  
  116. }
  117.  
  118. function addition2() {
  119.     document.addem.answer2.value = addthem2()
  120.     document.addem.answer2.value = dollarformat(document.addem.answer2.value)
  121.     calculate()
  122. }
  123.  
  124. function subtration() {
  125.    document.addem.answer3.value = subtractthem()
  126.    document.addem.answer3.value = dollarformat(document.addem.answer3.value)
  127.    calculate()
  128. }
  129.  
  130. function calculating() {
  131.    document.addem.answer.value = calculate()
  132.    document.addem.answer.value = dollarformat(document.addem.answer.value)
  133. }
  134.  
[HTML]
</script>
</head>

<body bgcolor="#FFCCCC">
<form name="addem" method="post">
<table border="0" cellpadding="2" cellspacing="0" width="731">
<tr>
<td colspan="3"><h3 align="center" style="margin-top: 0; margin-bottom: 12" ><font face="Verdana" size="3"><b>Taxable Gain Worksheet</b></font></h3>
<tr>
<td width="441" colspan="1">Policy #:&nbsp;
<input type="text" name="OBKey__101_1" size="30" tabindex="1"></td>
<td width="282" colspan="1" align="right"> Issue Date:&nbsp;
<input type="text" name="OBKey_104_1" tabindex="4"></td>
</tr>

<tr>
<td width="441" colspan="1" align="left">Policy Owner:&nbsp;
<input type="text" name="OBKey__102_1" size="50" tabindex="2"></td>
<td width="282" colspan="1" align="right">as of Date:&nbsp;
<input type="text" name="OBKey_103_1" tabindex="3"></td>
</tr>
</table>

<tr>
<td width="231">&nbsp;</td>
</tr>

<table width="545">
<tr>
<td width="112" align="left"><input type="checkbox" name="Full Surrender" value="ON" tabindex="5">
Full Surrender</td>
<td width="95" align="center"><input type="checkbox" name="Maturity" value="ON" tabindex="6">
Maturity</td>
<td width="127" align="center"><input type="checkbox" name="Lapse/Expiry" value="ON" tabindex="7">
Lapse/Expiry</td>
<td width="191" align="left"><input type="checkbox" name="Overloan" value="ON" tabindex="8">
Overloan</td>
</tr>
</table>

<tr>
<td width="231">&nbsp;</td>
</tr>

<table border="0" cellpadding="2" cellspacing="0" width="741">
<tr>
<td width="400" colspan="1" align="right">Base Contract Cash Value .................................................. ..</td>
<td colspan="2" align="left"><input type="TEXT" name="input1" onChange="addition(addem);" size="20" maxlength="10" tabindex="9" ></td>
</tr>

<tr>
<td colspan="1" align="right">Cash Value of LAD's .................................................. ..........</td>
<td colspan="2" align="left"><input type="TEXT" name="input2" onChange="addition(addem);" size="20" maxlength="10" tabindex="10" ></td>
</tr>

<tr>
<td colspan="1" align="right">Dividend Deposit .................................................. ................</td>
<td colspan="2" align="left"><input type="TEXT" name="input3" onChange="addition(addem);" size="20" maxlength="10" tabindex="11" ></td>
</tr>

<tr>
<td colspan="1" align="right">Premium Refund .................................................. .................</td>
<td colspan="2" align="left"><input type="TEXT" name="input5" onChange="addition(addem)" size="20" maxlength="10" tabindex="12"></td>
</tr>

<tr>
<td colspan="1" align="right">Other&nbsp;&nbsp;<input type="text" size="30" >&nbsp;..............................</td>
<td colspan="2" align="left"><input type="TEXT" name="input6" onChange="addition(addem)" size="20" maxlength="10" tabindex="13"></td>
</tr>

<tr>
<td colspan="1" align="right">Exchange Fee .................................................. .....................</td>
<td colspan="2" align="left"><input type="TEXT" name="input4" onChange="addition(addem)" size="20" maxlength="10" tabindex="14" style= "color:#FF0000" ></td>
</tr>

<tr>
<td colspan="1" align="right"></td>
<td width="209" colspan="1" align="right"><b>Subtotal</b>
<td width="120" colspan="1" align="right"><input type="TEXT" name="answer" onFocus="this.blur();" size="20" maxlength="10"></td>
</tr>

<tr>
<td colspan="1" align="right">Cost Basis (base policy prem. less dividends paid or credited)</td>
<td colspan="2" align="left"><input type="TEXT" name="input7" onChange="addition2(addem)" size="20" maxlength="10" tabindex="15"></td>
</tr>

<tr>
<td colspan="1" align="right">Dividend Deposit .................................................. ................</td>
<td colspan="2" align="left"><input type="TEXT" name="input8" onChange="addition2(addem)" size="20" maxlength="10" tabindex="16"></td>
</tr>

<tr>
<td colspan="1" align="right">Other&nbsp;&nbsp;<input type="text" size="30" >&nbsp;..............................</td>
<td colspan="2" align="left"><input type="TEXT" name="input9" onChange="addition2(addem)" size="20" maxlength="10" tabindex="17"></td>
</tr>

<tr>
<td colspan="1" align="right">Exchange Fee .................................................. .....................</td>
<td colspan="2" align="left"><input type="TEXT" name="input10" onChange="addition2(addem) "size="20" maxlength="10" tabindex="18" style="color:#FF0000 " ></td>
</tr>

<tr>
<td colspan="1" align="right">&nbsp;</td>
<td width="209" colspan="1" align="right"><b>Investment in Contract</b> </td>
<td width="120" colspan="1" align="right"><input type="TEXT" name="answer2" onFocus="this.blur();" size="20" maxlength="10"></td>
</tr>

<tr>
<td colspan="1" align="right">&nbsp;</td>
<td width="209" colspan="1" align="right"><b>Amount of Taxable Income</b> </td>
<td width="120" colspan="1" align="right"><input type="TEXT" name="answer3" size="20" maxlength="10" ></td>
</tr>

<tr>
<td width="231">&nbsp;</td>
</tr>

<tr>
<td colspan="1" align="left">1099 Completed?</td>
<td colspan="1" align="left"><input type="checkbox" name="1099Y" value="ON" tabindex="20">Yes&nbsp;&nbsp;
<input type="checkbox" name="1099N" value="ON" tabindex="21">No</td>
<td width="153" colspan="1" align="right"></td>
</tr>

<tr>
<td colspan="1" align="left">Is Federal withholding notice needed?</td>
<td colspan="1" align="left"><input type="checkbox" name="1099Y" value="ON" tabindex="22">Yes&nbsp;&nbsp;
<input type="checkbox" name="1099N" value="ON" tabindex="23">
No&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Done by</td>
<td colspan="1" align="left"><input type="text" name="OBProperty_UserName" tabindex="24"></td>
</tr>

<tr>
<td colspan="1" align="left">Possible state withholding?</td>
<td colspan="1" align="left"><input type="checkbox" name="1099Y" value="ON" tabindex="25">Yes&nbsp;&nbsp;
<input type="checkbox" name="1099N" value="ON" tabindex="26">
No&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Date</td>
<td colspan="1" align="left"><input type="text" name="OBProperty_DateStored" tabindex="27"></td>
</tr>

<tr>
<td><button type="reset" value="Reset" name="Reset" id="Reset">Reset</button></td>
<td><button type="submit">Submit</button></td>
</tr>
</table>

</form>
<body>
</body>
</html>[/HTML]
Jan 21 '08 #1
Share this Question
Share on Google+
16 Replies


acoder
Expert Mod 15k+
P: 16,027
Welcome to TSDN!

Do you want to format on each key press or after the value in a particular text box has changed?
Jan 22 '08 #2

P: 17
Welcome to TSDN!

Do you want to format on each key press or after the value in a particular text box has changed?

After the value in a particular text box has changed. As in formatting after moving to next text box.
Jan 22 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Then apply the currency format function onchange:
Expand|Select|Wrap|Line Numbers
  1. onchange="dollarformat(this.value);"
Jan 22 '08 #4

P: 17
Then apply the currency format function onchange:
Expand|Select|Wrap|Line Numbers
  1. onchange="dollarformat(this.value);"

I currently have an add method being called on change. I tried to add dollarformat(this.value); to onChange as well but has no effect even when i change it to the only method being called. How do you add more than one method to an event?
Jan 22 '08 #5

Markus
Expert 5K+
P: 6,050
I currently have an add method being called on change. I tried to add dollarformat(this.value); to onChange as well but has no effect even when i change it to the only method being called. How do you add more than one method to an event?
Expand|Select|Wrap|Line Numbers
  1. <input onchange="someFunction(); someOtherFunction()" />
  2.  
Should work..

Am i right?
Jan 22 '08 #6

P: 17
Expand|Select|Wrap|Line Numbers
  1. <input onchange="someFunction(); someOtherFunction()" />
  2.  
Should work..

Am i right?

It formats into currency but disables my add function.
Jan 22 '08 #7

acoder
Expert Mod 15k+
P: 16,027
It formats into currency but disables my add function.
Add it first and then apply the currency format.
Jan 23 '08 #8

P: 17
Add it first and then apply the currency format.
Still will not work!
Jan 24 '08 #9

P: 17
Still will not work!
By applying the currency format method before the add method, it disables my add function and vice versa. I can only get one or the other to work. This is totally getting me. Need to get working for project at work. Any help would be mostly appreciated.
Jan 24 '08 #10

acoder
Expert Mod 15k+
P: 16,027
I think you need
Expand|Select|Wrap|Line Numbers
  1. this.value=dollarformat(this.value);
Jan 24 '08 #11

P: 17
I think you need
Expand|Select|Wrap|Line Numbers
  1. this.value=dollarformat(this.value);
That is what I was using. I even tried taking the formatting off of the text boxes where it calculates the total. For some reason, only one or the other method will work. I even tried to create a new method combining the two but to no avail.
separately they work but together it is only one or the other. I even tried to add the formatting function to the end of the add function but nothing.
Jan 24 '08 #12

acoder
Expert Mod 15k+
P: 16,027
parseFloat gives a result of NaN if there's a dollar at the beginning. So get the substring in your addition function.

There's no need for the evals - just add them as numbers.
Jan 25 '08 #13

P: 17
parseFloat gives a result of NaN if there's a dollar at the beginning. So get the substring in your addition function.

There's no need for the evals - just add them as numbers.

Newbie here, not quite sure how to do that.
Jan 25 '08 #14

acoder
Expert Mod 15k+
P: 16,027
parseFloat gives a result of NaN if there's a dollar at the beginning. So get the substring in your addition function.
To get the substring, just use the substring method of the string. In this case, you want to ignore the first character, so use str.substring(1).
There's no need for the evals - just add them as numbers.
Only use eval where necessary. Here you're using eval even though you're adding variables containing numbers. Change, e.g. eval(add1) + eval(add2) + ... + eval(add6) to add1 + add2 + ... + add6.
Jan 28 '08 #15

P: 17
To get the substring, just use the substring method of the string. In this case, you want to ignore the first character, so use str.substring(1).
Only use eval where necessary. Here you're using eval even though you're adding variables containing numbers. Change, e.g. eval(add1) + eval(add2) + ... + eval(add6) to add1 + add2 + ... + add6.

Thanks for all your help!!!!
Jan 30 '08 #16

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Post again if you have any more questions.
Jan 30 '08 #17

Post your reply

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