Currency format in textboxes

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • Alexio
    New Member
    • Jan 2008
    • 17
    #1

    Currency format in textboxes

    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>Untitl ed Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <script language="javas cript" type="text/javascript">
    [/HTML]
    [CODE=javascript]function addthem() {
    //ADD FIRST INPUT VALUE

    var add1 = document.addem. input1.value
    var add1 = parseFloat(add1 , 10)
    add1 = (isNaN(add1))?0 :add1;


    //ADD SECOND INPUT VALUE
    var add2 = document.addem. input2.value
    var add2 = parseFloat(add2 , 10)
    add2 = (isNaN(add2))?0 :add2;

    //ADD THIRD INPUT VALUE
    var add3 = document.addem. input3.value
    var add3 = parseFloat(add3 , 10)
    add3 = (isNaN(add3))?0 :add3;

    //ADD FOURTH INPUT VALUE
    var add4 = document.addem. input4.value
    var add4 = parseFloat(add4 , 10)
    add4 = (isNaN(add4))?0 :add4;

    //ADD FIFTH INPUT VALUE
    var add5 = document.addem. input5.value
    var add5 = parseFloat(add5 , 10)
    add5 = (isNaN(add5))?0 :add5;

    //ADD SIXTH INPUT VALUE
    var add6 = document.addem. input6.value
    var add6 = parseFloat(add6 , 10)
    add6 = (isNaN(add6))?0 :add6;


    //ADD THEM TOGETHER
    return eval(add1) + eval(add2) + eval(add3) + eval(add4) + eval(add5) + eval(add6);

    }










    function addthem2() {
    //ADD FIRST INPUT VALUE
    var add7 = document.addem. input7.value
    var add7 = parseFloat(add7 , 10)
    add7 = (isNaN(add7))?0 :add7;


    //ADD SECOND INPUT VALUE
    var add8 = document.addem. input8.value
    var add8 = parseFloat(add8 , 10)
    add8 = (isNaN(add8))?0 :add8;

    //ADD THIRD INPUT VALUE
    var add9 = document.addem. input9.value
    var add9 = parseFloat(add9 , 10)
    add9 = (isNaN(add9))?0 :add9;

    //ADD FOURTH INPUT VALUE
    var add10 = document.addem. input10.value
    var add10 = parseFloat(add1 0, 10)
    add10 = (isNaN(add10))? 0:add10;

    //ADD THEM TOGETHER
    return eval(add7) + eval(add8) + eval(add9) + eval(add10);

    }

    //FUNCTION WILL PARSE THE TOTAL AS DOLLAR FORMAT
    function dollarformat(nu m) {
    num = num.toString(). replace(/\$|\,/g,'');
    if(isNaN(num)) num = "0";
    cents = Math.floor((num *100+0.5)%100);
    num = Math.floor((num *100+0.5)/100).toString() ;
    if(cents < 10) cents = "0" + cents;
    for (var i = 0; i < Math.floor((num .length-(1+i))/3); i++)
    num = num.substring(0 ,num.length-(4*i+3))+','+nu m.substring(num .length-(4*i+3));
    return ('$' + num + '.' + cents);
    }

    //CALCUATES THE ADD/SUBTRACT VALUES
    function calculate() {
    var x = addthem()
    var y = addthem2()

    if(x>y) {
    max = x-y
    document.addem. answer3.value = dollarformat(ma x)
    }

    if(x<y) {
    max = dollarformat(y-x)
    max = "-" + max
    document.addem. answer2.value = max
    }

    if (x==y) {
    max = x-y
    document.addem. answer3.value = dollarformat(ma x)
    }
    }

    function addition() {
    document.addem. answer.value = addthem()
    document.addem. answer.value = dollarformat(do cument.addem.an swer.value)

    calculate()

    }

    function addition2() {
    document.addem. answer2.value = addthem2()
    document.addem. answer2.value = dollarformat(do cument.addem.an swer2.value)
    calculate()
    }

    function subtration() {
    document.addem. answer3.value = subtractthem()
    document.addem. answer3.value = dollarformat(do cument.addem.an swer3.value)
    calculate()
    }

    function calculating() {
    document.addem. answer.value = calculate()
    document.addem. answer.value = dollarformat(do cument.addem.an swer.value)
    }
    [/CODE]

    [HTML]
    </script>
    </head>

    <body bgcolor="#FFCCC C">
    <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>Tax able Gain Worksheet</b></font></h3>
    <tr>
    <td width="441" colspan="1">Pol icy #:&nbsp;
    <input type="text" name="OBKey__10 1_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">Po licy Owner:&nbsp;
    <input type="text" name="OBKey__10 2_1" size="50" tabindex="2"></td>
    <td width="282" colspan="1" align="right">a s of Date:&nbsp;
    <input type="text" name="OBKey_103 _1" tabindex="3"></td>
    </tr>
    </table>

    <tr>
    <td width="231">&nb sp;</td>
    </tr>

    <table width="545">
    <tr>
    <td width="112" align="left"><i nput 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"><i nput type="checkbox" name="Overloan" value="ON" tabindex="8">
    Overloan</td>
    </tr>
    </table>

    <tr>
    <td width="231">&nb sp;</td>
    </tr>

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

    <tr>
    <td colspan="1" align="right">C ash Value of LAD's ............... ............... ............... ............... </td>
    <td colspan="2" align="left"><i nput type="TEXT" name="input2" onChange="addit ion(addem);" size="20" maxlength="10" tabindex="10" ></td>
    </tr>

    <tr>
    <td colspan="1" align="right">D ividend Deposit ............... ............... ............... ............... ......</td>
    <td colspan="2" align="left"><i nput type="TEXT" name="input3" onChange="addit ion(addem);" size="20" maxlength="10" tabindex="11" ></td>
    </tr>

    <tr>
    <td colspan="1" align="right">P remium Refund ............... ............... ............... ............... .......</td>
    <td colspan="2" align="left"><i nput type="TEXT" name="input5" onChange="addit ion(addem)" size="20" maxlength="10" tabindex="12"></td>
    </tr>

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

    <tr>
    <td colspan="1" align="right">E xchange Fee ............... ............... ............... ............... ...........</td>
    <td colspan="2" align="left"><i nput type="TEXT" name="input4" onChange="addit ion(addem)" size="20" maxlength="10" tabindex="14" style= "color:#FF0 000" ></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.b lur();" size="20" maxlength="10"> </td>
    </tr>

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

    <tr>
    <td colspan="1" align="right">D ividend Deposit ............... ............... ............... ............... ......</td>
    <td colspan="2" align="left"><i nput type="TEXT" name="input8" onChange="addit ion2(addem)" size="20" maxlength="10" tabindex="16"></td>
    </tr>

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

    <tr>
    <td colspan="1" align="right">E xchange Fee ............... ............... ............... ............... ...........</td>
    <td colspan="2" align="left"><i nput type="TEXT" name="input10" onChange="addit ion2(addem) "size="20" maxlength="10" tabindex="18" style="color:#F F0000 " ></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.b lur();" 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">&nb sp;</td>
    </tr>

    <tr>
    <td colspan="1" align="left">10 99 Completed?</td>
    <td colspan="1" align="left"><i nput type="checkbox" name="1099Y" value="ON" tabindex="20">Y es&nbsp;&nbsp;
    <input type="checkbox" name="1099N" value="ON" tabindex="21">N o</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"><i nput type="checkbox" name="1099Y" value="ON" tabindex="22">Y es&nbsp;&nbsp;
    <input type="checkbox" name="1099N" value="ON" tabindex="23">
    No&nbsp;&nbsp;& nbsp;&nbsp;&nbs p;&nbsp;&nbsp;& nbsp;Done by</td>
    <td colspan="1" align="left"><i nput type="text" name="OBPropert y_UserName" tabindex="24"></td>
    </tr>

    <tr>
    <td colspan="1" align="left">Po ssible state withholding?</td>
    <td colspan="1" align="left"><i nput type="checkbox" name="1099Y" value="ON" tabindex="25">Y es&nbsp;&nbsp;
    <input type="checkbox" name="1099N" value="ON" tabindex="26">
    No&nbsp;&nbsp;& nbsp;&nbsp;&nbs p;&nbsp;&nbsp;D ate</td>
    <td colspan="1" align="left"><i nput type="text" name="OBPropert y_DateStored" tabindex="27"></td>
    </tr>

    <tr>
    <td><button type="reset" value="Reset" name="Reset" id="Reset">Rese t</button></td>
    <td><button type="submit">S ubmit</button></td>
    </tr>
    </table>

    </form>
    <body>
    </body>
    </html>[/HTML]
    Last edited by acoder; Jan 22 '08, 08:41 AM. Reason: Added code tags
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Welcome to TSDN!

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

        Comment

        • Alexio
          New Member
          • Jan 2008
          • 17
          #3
          Originally posted by acoder
          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.

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Then apply the currency format function onchange:
              Code:
              onchange="dollarformat(this.value);"

                Comment

                • Alexio
                  New Member
                  • Jan 2008
                  • 17
                  #5
                  Originally posted by acoder
                  Then apply the currency format function onchange:
                  Code:
                  onchange="dollarformat(this.value);"

                  I currently have an add method being called on change. I tried to add dollarformat(th is.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?

                    Comment

                    • Markus
                      Recognized Expert Expert
                      • Jun 2007
                      • 6092
                      #6
                      Originally posted by Alexio
                      I currently have an add method being called on change. I tried to add dollarformat(th is.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?
                      [code=html]
                      <input onchange="someF unction(); someOtherFuncti on()" />
                      [/code]
                      Should work..

                      Am i right?

                        Comment

                        • Alexio
                          New Member
                          • Jan 2008
                          • 17
                          #7
                          Originally posted by markusn00b
                          [code=html]
                          <input onchange="someF unction(); someOtherFuncti on()" />
                          [/code]
                          Should work..

                          Am i right?

                          It formats into currency but disables my add function.

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              Originally posted by Alexio
                              It formats into currency but disables my add function.
                              Add it first and then apply the currency format.

                                Comment

                                • Alexio
                                  New Member
                                  • Jan 2008
                                  • 17
                                  #9
                                  Originally posted by acoder
                                  Add it first and then apply the currency format.
                                  Still will not work!

                                    Comment

                                    • Alexio
                                      New Member
                                      • Jan 2008
                                      • 17
                                      #10
                                      Originally posted by Alexio
                                      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.

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          I think you need
                                          Code:
                                          this.value=dollarformat(this.value);

                                            Comment

                                            • Alexio
                                              New Member
                                              • Jan 2008
                                              • 17
                                              #12
                                              Originally posted by acoder
                                              I think you need
                                              Code:
                                              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.

                                                Comment

                                                • acoder
                                                  Recognized Expert MVP
                                                  • Nov 2006
                                                  • 16032
                                                  #13
                                                  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.

                                                    Comment

                                                    • Alexio
                                                      New Member
                                                      • Jan 2008
                                                      • 17
                                                      #14
                                                      Originally posted by acoder
                                                      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.

                                                        Comment

                                                        • acoder
                                                          Recognized Expert MVP
                                                          • Nov 2006
                                                          • 16032
                                                          #15
                                                          Originally posted by acoder
                                                          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 ).
                                                          Originally posted by acoder
                                                          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.

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...