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

  1. Automatically format various currency entries into one standard dollar format ($5,000.11)
  2. Format a number when a user moves to the next form field (this is called the “blur” event)
  3. 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.