www.webdeveloper.com
Results 1 to 7 of 7

Thread: Decimal and currency format help

  1. #1
    Join Date
    Nov 2010
    Posts
    4

    Decimal and currency format help

    I found a javascript calculator online and modified it to my needs. It works just fine, but I need my returns to be in currency format with two decimal places. Preferably like this "$1,111.11".

    Here is what I have so far:

    <script language="JavaScript">
    <!--
    function CalculateTotals(){
    f=document.orderform;
    f.total1.value=parseInt(f.qty1.value)*10;
    f.total2.value=parseInt(f.qty2.value)*12;
    f.total3.value=parseInt(f.qty3.value)*14;
    f.total4.value=parseInt(f.qty4.value)*16;
    f.grandtotal.value=parseInt(f.total1.value)*1.0825
    +parseInt(f.total2.value)*1.0825
    +parseInt(f.total3.value)*1.0825
    +parseInt(f.total4.value)*1.0825;}
    //-->
    </script></head>
    <body>
    <form name="orderform" method="post" action="formprocessor">
    <table border="3"><tr>
    <th>Square Feet</th><th>Tint</th><th>Price Per Foot</th>
    <th>Total</th></tr>
    <tr><td>
    <input name="qty1" size="3" OnBlur="CalculateTotals()" /></td>
    <td>Cheapest Tint</td>
    <td align="center">$10/ft.</td>
    <td><input name="total1" size="7"
    OnFocus="document.orderform.qty2.select();
    document.orderform.qty2.focus();" /></td></tr>
    <tr><td>
    <input name="qty2" size="3" OnBlur="CalculateTotals()" /></td>
    <td>Regular Tint</td>
    <td align="center">$12/ft.</td>
    <td><input name="total2" size="7"
    OnFocus="document.orderform.qty3.select();
    document.orderform.qty3.focus();" /></td></tr>
    <tr><td>
    <input name="qty3" size="3" OnBlur="CalculateTotals()" /></td>
    <td>Good Tint</td>
    <td align="center">$14/ft</td>
    <td><input name="total3" size="7"
    OnFocus="document.orderform.qty4.select();
    document.orderform.qty4.focus();" /></td></tr>
    <tr><td>
    <input name="qty4" size="3" OnBlur="CalculateTotals()" /></td>
    <td>Ballin Tint</td>
    <td align="center">$16/ft</td>
    <td><input name="total4" size="7"
    OnFocus="document.orderform.qty1.select();
    document.orderform.qty1.focus();" /></td></tr>
    <tr><td></td><td></td>
    <td align="center"><b>GRAND TOTAL:</b></td>
    <td><input name="grandtotal" size="7"
    OnFocus="document.orderform.qty1.select();
    document.orderform.qty1.focus();" /></td></tr>
    </table>
    <input type="hidden" value="5" name="sh" />
    </form>
    <script language="JavaScript">
    <!--
    f=document.orderform;
    f.qty1.value=0; f.qty2.value=0;
    f.qty3.value=0; f.qty4.value=0;
    f.total1.value=0; f.total2.value=0;
    f.total3.value=0; f.total4.value=0;
    f.grandtotal.value=0;
    //-->
    </script>
    </body></html>

    Sorry for the length and noobness of the post, Im familiar with HTML and CSS but JS is pretty new to me. Thanks in advance for any help

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

  3. #3
    Join Date
    Nov 2010
    Posts
    4
    Thank you. I understand that these are independent scripts that will successfully do what i need. Should I just simply paste them into the head along with what I already have? or Is there a way to modify the code I have found to do this?

  4. #4
    Join Date
    Nov 2010
    Posts
    4
    I guess what Im asking is that since I already have my calculator function set up, is there no way to simply change the formatting of the output for these values? Or do I have to create a second function just to reformat my outputs? The latter seems unlikely, but I am very new to JS so some detailed help would be greatly appreciated.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    Try this ...
    Code:
    <html>
    <head>
    <title>Totals Calculator</title>
    
    <script type="text/javascript"> <!-- archaic format (remove it): language="JavaScript" -->
    
    // From: http://www.webdeveloper.com/forum/showthread.php?t=238488
    
    function CalculateTotals() {
      var f=document.orderform;
      var v1=parseInt(f.qty1.value)*10;
      var v2=parseInt(f.qty2.value)*12;
      var v3=parseInt(f.qty3.value)*14;
      var v4=parseInt(f.qty4.value)*16;
    
      f.total1.value=formatCurrency(v1);
      f.total2.value=formatCurrency(v2);
      f.total3.value=formatCurrency(v3);
      f.total4.value=formatCurrency(v4);
    
      var vtot = v1*1.0825 + v2*1.0825 + v3*1.0825 + v4*1.0825;
      f.grandtotal.value = formatCurrency(vtot);
    }
    
    function ClearForm() {
      var f=document.orderform;
      f.qty1.value=0; f.qty2.value=0;
      f.qty3.value=0; f.qty4.value=0;
      f.total1.value=0; f.total2.value=0;
      f.total3.value=0; f.total4.value=0;
      f.grandtotal.value=0;
    }
    
    function formatCurrency(num) {
      num = num.toString().replace(/\$|\,/g,'');
      if(isNaN(num)) num = "0";
      sign = (num == (num = Math.abs(num)));
      num = Math.floor(num*100+0.50000000001);
      cents = num&#37;100;
      num = Math.floor(num/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))+','+num.substring(num.length-(4*i+3));
      return (((sign)?'':'-') + '$' + num + '.' + cents);
    }
    
    onload = function() {
      ClearForm();
    }
    
    </script>
    </head>
    <body>
    <form name="orderform" method="post" action="formprocessor" onsubmit="return false">
    <table border="3">
     <tr>
      <th>Square Feet</th>
      <th>Tint</th><th>Price Per Foot</th>
      <th>Total</th>
     </tr>
     <tr>
      <td><input name="qty1" size="3" onblur="CalculateTotals()" /></td>
      <td>Cheapest Tint</td>
      <td align="center">$10/ft.</td>
      <td><input name="total1" size="7" onfocus="document.orderform.qty2.select();document.orderform.qty2.focus();" /></td>
     </tr>
     <tr>
      <td><input name="qty2" size="3" onblur="CalculateTotals()" /></td>
      <td>Regular Tint</td>
      <td align="center">$12/ft.</td>
      <td><input name="total2" size="7" onfocus="document.orderform.qty3.select();document.orderform.qty3.focus();" /></td>
     </tr>
     <tr>
      <td><input name="qty3" size="3" onblur="CalculateTotals()" /></td>
      <td>Good Tint</td>
      <td align="center">$14/ft</td>
      <td><input name="total3" size="7" onfocus="document.orderform.qty4.select();document.orderform.qty4.focus();" /></td>
     </tr>
     <tr>
      <td><input name="qty4" size="3" onblur="CalculateTotals()" /></td>
      <td>Ballin Tint</td>
      <td align="center">$16/ft</td>
      <td><input name="total4" size="7" onfocus="document.orderform.qty1.select();document.orderform.qty1.focus();" /></td>
     </tr>
     <tr>
      <td colspan="2"></td>
      <td align="center"><b>GRAND TOTAL:</b></td>
      <td><input name="grandtotal" size="7" onfocus="document.orderform.qty1.select();document.orderform.qty1.focus();" /></td>
     </tr>
    </table>
    
    <!-- following really needed?  I don't see it used anywhere -->
    <input type="hidden" value="5" name="sh" />
    
    </form>
    </body>
    </html>
    It appears to be a rather dated piece of code. Some tags have been deprecated.

    BTW: You should enclose your script between [ code] and [ /code] tags (without the spaces) to make it easier for other forum members to read, analyze and comment upon.

  6. #6
    Join Date
    Nov 2010
    Posts
    4
    It works perfectly thank you very much! I am a quick learner, but JS is very new to me so it's great to have some experienced advice. and I'll use the <code> </code> tags from now on.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    You're most welcome.
    Happy to help.
    Good Luck with your studies.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles