Auto format Currency using jQuery


In this article, I will explained how to format the numeric text into currency format automatically using jQuery. Whenever we entered the amount in a text box we need to display that entered amount into currency format for US dollar. US currency amount should be displayed like this - $25,000.00. But we don’t need to enter dollar and the ‘,’ separation for the amount. So, we need to convert the entered amount to US currency format with the ‘$’ symbol and ‘,’ separation.

Introduction:


jQuery is a collection of javascript libraries. Using jQuery we can implement many miscellaneous functionalities like drag and drop, News's slider, map highlights, date picker, gallery, etc., for implementing the jQuery, there is no need to learn about any javascript methodologies. Just we need to link the jQuery plug-in/javascript files and follow the documentation which is providing by jQuery (http://jQuery.com). This site also provides the all files and complete documentation of each functionality. Many other sites also provide jQuery related files.

I implemented many functionalities using jQuery. Recently, I implemented the "Auto currency format for US dollars" using jQuery. Here I explained to you about the implementation of this feature.

Summary:



Whenever we entered the amount in a text box we need to display that entered amount into currency format for US dollar. US currency amount should be displayed like this - $25,000.00. But we don't need to enter dollar and the ',' separation for the amount. So, we need to convert the entered amount to US currency format with the '$' symbol and ',' separation.

Implementation Steps:



Step 1:


For implementing this feature, we need the following files,
1) "jquery-1.4.2.min.js" file
2) "jquery.formatCurrency-1.4.0.js" file

Link the above files into your page as follows,

<script type="text/javascript" src="./external/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="./jquery.formatCurrency-1.4.0.js"></script>


Here, I have the above javascript files in the specified folder location.

Step 2:



Need to initialize the "ready" function. This ready function is used to initialize all the events to the specified control. Here we need to initialize to type of events to the text box control and button control.

1) Need to register the "Click" function to "Convert" button
2) Need to register the "Blur" function to "Textbox"

Register these events within the ready function as follows,

<script type="text/javascript">
$(document).ready(function() {

//Registerting the click event to "currency button"
$('#currencyButton').click(function() {

$('#currencyField').formatCurrency();

$('#currencyField').formatCurrency('.currencyLabel');
});

//Registerting the blur event to "currency text box"
$('.currency').blur(function() {
$('.currency').formatCurrency();
});

});

</script>


In above code, Currency button is an id of the "Convert" button, currencyField is an id of the "text box".

CurrencyLabel and currency is a class name. jQuery gets the control based on these class names.

"FormatCurrency" is a jQuery method. This method converts the amount into currency format. You need to call this method with the text box id. So it converts the text box value into the currency format and returns the results to the text box.

Please visit below site for the complete documentation of the formatCurrency method,

http://code.google.com/p/jquery-formatcurrency/wiki/Usage

Step 3:


Refer the following codes for HTML designs

'input type="text" id="currencyField" value="" /'
'input type="button" id="currencyButton" value="Convert" /'
'span class="currencyLabel">'input type="text" id="currencyField1" class='currency' value="" /'


Note:

Don't need to write any style for "Currency" and "CurrencyLabel" class.

Herewith, I attached the complete solution of this functionality.

Please post your comments.

Reference: http://www.bendewey.com/code/formatcurrency/demo/


Attachments

  • Auto format Currency using jQuery (42945-10759-CurrencyFormatWithJQuery.rar)
  • Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: