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.


  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
		// 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

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.

About the Author

Kevin Leary is a freelance developer in Boston, MA with a strong portfolio of work, and over 13 years of experience as a programming consultant and digital strategy provider. Interested in working together? Hire me for your next project.