Jquery-Price-Format

jQuery Price Format Plugin is useful to format input fields and HTML elements as prices. For example, if you type 123456, the plugin updates it to US$ 1,234.56.

Yes, we also have a prototype version but it is out of maintenance.

It is customizable, so you can use other prefixes, separators, suffixes, plus sign, minus sign and so on. Check out the examples below.

Basic Usage

This is the most basic usage. It loads default options: use US$ as prefix, a comma as thousands separator and a dot as cents separator.

Try Me!


// JavaScript
$('#element').priceFormat();

// HTML
<input type="text" value="" id="element" name="element">

Customize

This is a costumized format for brazilians use: R$ as prefix, a dot as cents separator and a dot as thousands separator. Play with the options centsSeparator and/or thousandsSeparator to better fit your needs.

Try Me!


// JavaScript
$('#element').priceFormat({
    prefix: 'R$ ',
    centsSeparator: ',',
    thousandsSeparator: '.'
});

// HTML
<input type="text" value="123456" id="element" name="element">

Skipping some option

You can skip some of the options (prefix, centsSeparator and/or thousandsSeparator) by set them blank as you need. You can also set to empty the field when it is empty.

Try Me!


// JavaScript
$('#element').priceFormat({
    prefix: '',
    thousandsSeparator: '',
    clearOnEmpty: true
});

// HTML
<input type="text" value="123456" id="element" name="element">

Working with limits

You can set a limited length (limit) or change the size of the cents field (centsLimit).

Try Me!


// JavaScript
$('#element').priceFormat({
    limit: 2,
    centsLimit: 1
});

// HTML
<input type="text" value="123456" id="element" name="element">

Suffix

The default value of suffix is empty.

Try Me!


// JavaScript
$('#element').priceFormat({
    prefix: '',
    suffix: '€'
});

// HTML
<input type="text" value="123456" id="element" name="element">

Clear Prefix and Suffix on Blur

The default value of clearPrefix and clearSuffix is false. Both work in same way.

Try Me!


// JavaScript
$('#element').priceFormat({
    clearPrefix: true,
    clearSuffix: true,
    suffix: '$$'
});

// HTML
<input type="text" value="123456" id="element" name="element">

Allow Negatives

The default value of allowNegative property is false. Zero values will not be negative.

Try Me!


// JavaScript
$('#element').priceFormat({
    allowNegative: true
});

// HTML
<input type="text" value="-123456" id="element" name="element">

Plus sign

Sometimes show the plus sign can improve your usability. Since you allow this option you will automaticly allow the use of the minus sign.

Try Me!


// JavaScript
$('#element').priceFormat({
    prefix: '',
    thousandsSeparator: '',
    insertPlusSign: 'true'
});

// HTML
<input type="text" value="123456" id="element" name="element">

Unmask function

Return the value without mask. Negative numbers will return the minus signal.

Try Me!

Alert Value Unmask

// JavaScript
$('#element').priceFormat({
    allowNegative: true
});

$("#button").click(function() {
    alert($('#element').unmask());
});

// HTML
<input type="text" value="-123456" id="element" name="element">
<button id="button" class="button">Alert Value Unmask</button>

Price to Float

Return the value in float.

Try Me!

Alert Float Value

// JavaScript
$('#element').priceFormat({
    prefix: 'R$ ',
    allowNegative: true
});

$("#float").click(function() {
    alert($('#element').priceToFloat());
});

// HTML
<input type="text" value="-123456" id="element" name="element">
<button id="button" class="button">Alert Float Value</button>

Unprice and Price function

You can switch on and off the price format for the elements.

Try Me!

Unprice Format
Price Format

// JavaScript
$('#element').priceFormat({
    prefix: 'R$',
    suffix: '$$',
    clearSuffix: true,
    clearPrefix: true
});

$("#unprice").click(function() {
    $('#element').unpriceFormat();
});

$("#price").click(function() {
    $('#element').priceFormat({
        prefix: 'R$',
        suffix: '$$',
        clearSuffix: true,
        clearPrefix: true
    });
});

// HTML
<input type="text" value="123456" id="element" name="element">
<button id="unprice" class="button">Unprice Format</button>
<button id="price" class="button">Price Format</button>

Use it with any HTML Element

You can and should use it with any HTML element.

123456

// JavaScript
$('#htmlfield').priceFormat({
    prefix: 'R$ ',
    centsSeparator: ',',
    thousandsSeparator: '.',
    insertPlusSign: true
});

// HTML
<span id="htmlfield">123456</span>