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.
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.
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.
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,
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,
//Registerting the click event to "currency button"
//Registerting the blur event to "currency text box"
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,
Refer the following codes for HTML designs
'input type="text" id="currencyField1" class='currency' value="" /'
'input type="text" id="currencyField" value="" /'
'input type="button" id="currencyButton" value="Convert" /'
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.