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.

View project on GitHub

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.

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

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

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

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

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

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

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

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

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

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

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