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.