jQuery FormatCurrency Plugin

This plugin has been made obselete.
Please use the latest release available on google code at http://jquery-formatcurrency.googlecode.com

Hey all, its been a while since my last post.  This just a simple little format currency plugin that I built a while back.  Hope everyone enjoys it.

About the Plugin

The plugin, called the FormatCurrency Plugin, requires the jQuery core file and a single javascript file, jquery.formatCurrency.js. A demo is available on my prorfolio website. The plugin was designed with the following features.

  • Formats the selector’s value to a formatted version of the currency.

Options

useHtml – if true this value uses the html() attribute to get and set the value for the currency, otherwise the plugin will use the val() attribute.  The default is false.

symbol – The dollar sign to be used when formatting the currency. The default is $.

Downloads

This plugin has been made obselete.
Please use the latest release available on google code at http://jquery-formatcurrency.googlecode.com

jQuery Core (plugin built on jquery-1.2.6.js)

jquery.formatCurrency.js

jQueryFormatCurrencySample.zip

Using the Plugin

In order to use this plugin create an html page and attached the jQuery core javascript file and the jquery.formatCurrency.js file.  In this example I will be formatting the currency on a button click.  Although another popular formatting technique would be to set the currency on lost focus (the sample download and demo contain both options).

Html

<div class="sample">
<h3>Formatting Using Button Click</h3>
<input type="textbox" id="currencyField" value="$1,220.00" />
     <input type="button" id="currencyButton" value="Convert" /></div>

Javascript

    $(document).ready(function()
    {
        $('#currencyButton').click(function()
        {
            $('#currencyField').formatCurrency();
        });
    });

Known Issues

At the moment their are no known issues.  The plugin has been tested successfully in Windows IE 8 Beta, Mozilla, and Google Chrome.

Advertisements

17 Responses to “jQuery FormatCurrency Plugin”


  1. 1 Josh January 28, 2009 at 10:50 pm

    Great thank you just learning JQuery and wanted to do just that.

    I added a new method called toNumber which will take out all non number characters from a string which is useful if you only want numbers in a text field.

    (function($) {

    // Converts text to a currency number
    $.fn.formatCurrency = function(settings) {
    settings = jQuery.extend({
    name: “formatCurrency”,
    useHtml: false,
    global: true
    }, settings);

    return this.each(function() {
    var num = “0”;
    num = $(this)[settings.useHtml ? ‘html’ : ‘val’]();
    num = num.replace(/\$|\,/g, ”);
    if (isNaN(num))
    num = “0”;
    sign = (num == (num = Math.abs(num)));
    num = Math.floor(num * 100 + 0.50000000001);
    cents = num % 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)); $(this)[settings.useHtml ? 'html' : 'val'](((sign) ? '' : '-') + '$' + num + '.' + cents); }); }, // Remove all non numbers from text $.fn.toNumber = function(settings) { settings = jQuery.extend({ name: "toNumber", useHtml: false, global: true }, settings); return this.each(function() { var value = $(this)[settings.useHtml ? 'html' : 'val'](); var temp = ''; jQuery.each(value, function(i, v) { if(!isNaN(v) && v != ' ') { temp += v; } }); $(this)[settings.useHtml ? 'html' : 'val'](temp); }); }; })(jQuery);[/sourcecode]

  2. 2 bendewey January 28, 2009 at 11:19 pm

    Thanks Josh,

    I tend to use regex for replacing content like that so I would maybe change the body of your toNumber to

    return this.each(function() {
    	  var method = settings.useHtml ? 'html' : 'val';
    	  $(this)[method]($(this)[method]().replace(/[^\d\.]/g, ''));
    });
  3. 3 Dav March 6, 2009 at 6:36 am

    Nice plugin. Can I suggest a config option to set the currency symbol rather than the hardcoded dollar sign. This would save me stripping it out and replacing it with a £ sign.

  4. 4 bendewey March 14, 2009 at 9:03 am

    Dav,

    Thanks for the comment. I updated the plugin to include a symbol setting. Enjoy.

  5. 5 bendewey April 28, 2009 at 9:48 pm

    I answered a question on StackOverflow.com that demonstrates using this plugin in an ASP.NET GridView control. http://stackoverflow.com/questions/797845/how-to-display-only-two-decimals-in-a-textbox-but-able-to-read-5-decimals#798155

  6. 6 peti May 13, 2009 at 2:38 pm

    Hello

    I created a modified version of your plugin.

    http://saxxon.org/jquery.formatCurrency.js

    Some example:

    HTML:
    123456789000

    $('.currency').formatCurrency({format:'en'});

    Result: € 123,456,789,000.00

    $('.currency').formatCurrency({format:'hu', symbol:'dollar'});

    Result: 123 456 789 000,00 $

    I hope it will usefull others.

    -Peti

  7. 7 Wim May 24, 2009 at 6:35 am

    Hey,

    On line 14, you replace the dollar sign:

    num = num.replace(/\$|\,/g, '');
    

    Shouldnt this be modified to adapt to the settings.symbol value?

    Wim

  8. 8 bendewey May 24, 2009 at 9:23 am

    @Wim, Thanks. I’m will be updating this plugin to google code/jQuery plugins very shortly. This release will fix that bug.

  9. 9 bendewey May 24, 2009 at 10:56 am

    Thanks for everyones support in this project. With the recent internationalization discussions I decided to completely overhaul the project. In the process I’ve added it to the OpenSource GoogleCode http://jquery-formatcurrency.googlecode.com. I haven’t released it for download yet (you can still get it from SVN), I will create a release shortly. To accompany the release, I will: Create a new post, update this post, and add it to the jQuery plugin library.

  10. 10 widi June 6, 2009 at 9:44 am

    how to convert each same class..
    eg

    Sub Total : 5000
    Total : 10000

  11. 11 bendewey June 8, 2009 at 9:02 am

    @widi,

    First off, you should be using the plugin from google code. Here is an example of how to convert an item with the same class

    <script type="text/javascript">
      $(function() {
        $('.money').formatCurrency();
      });
    </script>
    <div>
      <span class="money subTotal">5000</span>
      <span class="money total">10000</span>
    </div>
    
    
  12. 12 widi June 8, 2009 at 5:20 pm

    Ok i’ll try this codes, Thanks alot bendewey…

  13. 13 Jun July 8, 2009 at 8:16 pm

    Hi,

    I tried this plugin which is really great, but I found one thing I was not quite sure about, when I was trying to put in 33.80, the result was $33.79 rather than $33.80 I wanted to see.

    I am guessing the problem might be with “num = Math.floor(num * 100);” in the source code.

    Would you please kindly tell me if there is any way to get it right.

    Many thanks,

    Jun

  14. 14 bendewey July 9, 2009 at 7:41 am

    Jun,

    This is currently an open issue in the issues portion of the google code site. If you come up with a patch, please send it to me and I’ll update the source code. Otherwise, I’ll add another comment here when the issue is resolved.

    -Ben

  15. 15 JR March 8, 2013 at 5:30 pm

    Hi Ben,
    4 years later and this is still the best currency masking plugin around. One question for you. I noticed that illegal characters are removed automatically if you start with a number. But, if someone starts typing letters, it doesn’t block/replace them. I realize toNumber() changes the value after the fact, I was looking for an “as-you-type” solution. Thanks in advance!

  16. 16 bendewey March 8, 2013 at 5:42 pm

    JR,

    Please feel free to submit issues directly to https://code.google.com/p/jquery-formatcurrency/issues/list I realize it’s quite stale at the moment, I’ll do my best to get back around and update that.


  1. 1 Updated jQuery formatCurrency plugin posted on GoogleCode « Ben Dewey – Leveraging .NET for Appealing UIs Trackback on July 17, 2009 at 8:01 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




What else am I doing?

StackOverflow Facebook Twitter LinkedIn Live

Twitter

Pages

November 2008
M T W T F S S
« Oct   Feb »
 12
3456789
10111213141516
17181920212223
24252627282930

%d bloggers like this: