Automatically formatting currency fields for users can improve usability, and make things easy to process for form administrators. This problem/solution approach will show you how I automatically formatted currency form fields using a small bit of jQuery and JavaScript, improving form usability while standardizing form submissions.
See a demo!
The Problem
I recently experimented with a form field that allowed users to input currency values. A standard text input wouldn’t cut it, there is too much room for error and the submitted values aren’t standardized.
Requirements
- Automatically format various currency entries into one standard dollar format ($5,000.11)
- Format a number when a user moves to the next form field (this is called the “blur” event)
- Lightweight, re-usable and easy to use
The Solution
After experimenting with various jQuery plugins I found that the Price Format jQuery Plugin by Flavio Silveira met all of my requirements. After downloading the source code for the plugin and including it in the <head> section of my document I used the following:
// jQuery noConflict wrapper & document load
(function($){
$(function(){
// Define your currency field(s)
var currency_input = $('input.currency');
// Check the document for currency field(s)
if ( currency_input.length > 0 ){
// Format the currency field when a user clicks or tabs outside of the input
currency_input.blur(function(){
$(this).formatCurrency();
});
}
});
})(jQuery);
I hope this helps you format currency in a form field on your next project! If your scenario is customized don’t rule out this plugin. It has a great deal of customizations and settings available to suite specific needs.