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
    TX
    Posts
    7,946

  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
    TX
    Posts
    7,946
    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
    TX
    Posts
    7,946
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.14088 seconds
  • Memory Usage 2,919KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (7)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates