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
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)
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.
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);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, '')); });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.
Dav,
Thanks for the comment. I updated the plugin to include a symbol setting. Enjoy.
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
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
Hey,
On line 14, you replace the dollar sign:
Shouldnt this be modified to adapt to the settings.symbol value?
Wim
@Wim, Thanks. I’m will be updating this plugin to google code/jQuery plugins very shortly. This release will fix that bug.
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.
how to convert each same class..
eg
Sub Total : 5000
Total : 10000
@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>Ok i’ll try this codes, Thanks alot bendewey…
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
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
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!
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.