Jquery price format with lakhs separator?

Question

i got Jquery Price Format jQuery Plugin, it is working well with the thousand separators (Ex: 32'32,232.33), but i need the lakhs separator with thousands also like (32'32,232.33) , i have altered the Jquery but it seems work only the lakhs not working lakhs with thousands also

format.js

/*

* Price Format jQuery Plugin
* Created By Eduardo Cuducos cuducos [at] gmail [dot] com
* Currently maintained by Flavio Silveira flavio [at] gmail [dot] com
* Version: 1.7
* Release: 2012-02-22

* original char limit by Flavio Silveira <http://flaviosilveira.com>
* original keydown event attachment by Kaihua Qi
* keydown fixes by Thasmo <http://thasmo.com>
* Clear Prefix on Blur suggest by Ricardo Mendes from PhonoWay
* original allow negative by Cagdas Ucar <http://carsinia.com>
* keypad fixes by Carlos Vinicius <http://www.kvinicius.com.br> and Rayron Victor
* original Suffix by Marlon Pires Junior
* CentsLimit set to zero fixed by Jereon de Jong
* original idea for the use of the plus sign

*/

(function($) {

    /****************
    * Main Function *
    *****************/
    $.fn.priceFormat = function(options)
    {

        var defaults =
        {
            prefix: 'US$ ',
            suffix: '',
            centsSeparator: '.',
            thousandsSeparator: ',',
           lakhsSeparator: "'",
            limit: false,
            centsLimit: 2,
            clearPrefix: false,
            clearSufix: false,
            allowNegative: false,
            insertPlusSign: false
        };

        var options = $.extend(defaults, options);

        return this.each(function()
        {

            // pre defined options
            var obj = $(this);
            var is_number = /[0-9]/;

            // load the pluggings settings
            var prefix = options.prefix;
            var suffix = options.suffix;
            var centsSeparator = options.centsSeparator;
            var thousandsSeparator = options.thousandsSeparator;
            var lakhsSeparator = options.lakhsSeparator;
            var limit = options.limit;
            var centsLimit = options.centsLimit;
            var clearPrefix = options.clearPrefix;
            var clearSuffix = options.clearSuffix;
            var allowNegative = options.allowNegative;
            var insertPlusSign = options.insertPlusSign;

            // If insertPlusSign is on, it automatic turns on allowNegative, to work with Signs
            if (insertPlusSign) allowNegative = true;

            // skip everything that isn't a number
            // and also skip the left zeroes
            function to_numbers (str)
            {
                var formatted = '';
                for (var i=0;i<(str.length);i++)
                {
                    char_ = str.charAt(i);
                    if (formatted.length==0 && char_==0) char_ = false;

                    if (char_ && char_.match(is_number))
                    {
                        if (limit)
                        {
                            if (formatted.length < limit) formatted = formatted+char_;
                        }
                        else
                        {
                            formatted = formatted+char_;
                        }
                    }
                }

                return formatted;
            }

            // format to fill with zeros to complete cents chars
            function fill_with_zeroes (str)
            {
                while (str.length<(centsLimit+1)) str = '0'+str;
                return str;
            }

            // format as price
            function price_format (str)
            {
                // formatting settings
                var formatted = fill_with_zeroes(to_numbers(str));
                var thousandsFormatted = '';
                var thousandsCount = 0;
                var lakhsFormatted = '';
                var lakhsCount = 0;
                // Checking CentsLimit
                if(centsLimit == 0)
                {
                    centsSeparator = "";
                    centsVal = "";
                }

                // split integer from cents
                var centsVal = formatted.substr(formatted.length-centsLimit,centsLimit);
                var integerVal = formatted.substr(0,formatted.length-centsLimit);

                // apply cents pontuation
                formatted = (centsLimit==0) ? integerVal : integerVal+centsSeparator+centsVal;

                // apply thousands pontuation


                if (thousandsSeparator || $.trim(thousandsSeparator) != "")
                {
                    for (var j=integerVal.length;j>0;j--)
                    {
                        char_ = integerVal.substr(j-1,1);
                        thousandsCount++;
                        if (thousandsCount%3==0) char_ = thousandsSeparator+char_;
                        thousandsFormatted = char_+thousandsFormatted;
                    }

                    //
                    if (thousandsFormatted.substr(0,1)==thousandsSeparator) thousandsFormatted = thousandsFormatted.substring(1,thousandsFormatted.length);
                    formatted = (centsLimit==0) ? thousandsFormatted : thousandsFormatted+centsSeparator+centsVal;
                }

                // apply lakhs pontuation
             if (lakhsSeparator || $.trim(lakhsSeparator) != "")
                {

                    for (var j=integerVal.length;j>0;j--)
                    {
                        char_ = integerVal.substr(j-1,1);
                        char1_ = integerVal.substr(j-1,1);
                        lakhsCount++;





                        if (lakhsCount%5==0)
                     char_ =lakhsSeparator+char_;
                        lakhsFormatted = char_+lakhsFormatted;


                    }


                    if (lakhsFormatted.substr(0,1)==lakhsSeparator) lakhsFormatted = lakhsFormatted.substring(1,lakhsFormatted.length);
                    formatted = (centsLimit==0) ? lakhsFormatted : lakhsFormatted+centsSeparator+centsVal;
                }


                // if the string contains a dash, it is negative - add it to the begining (except for zero)
                if (allowNegative && str.indexOf('-') != -1 && (integerVal != 0 || centsVal != 0))
                    formatted = '-' + formatted;
                else if (insertPlusSign && (integerVal != 0 || centsVal != 0))
                    formatted = '+' + formatted;

                // apply the prefix
                if (prefix) formatted = prefix+formatted;

                // apply the suffix
                if (suffix) formatted = formatted+suffix;

                return formatted;
            }

            // filter what user type (only numbers and functional keys)
            function key_check (e)
            {
                var code = (e.keyCode ? e.keyCode : e.which);
                var typed = String.fromCharCode(code);
                var functional = false;
                var str = obj.val();
                var newValue = price_format(str+typed);

                // allow key numbers, 0 to 9
                if((code >= 48 && code <= 57) || (code >= 96 && code <= 105)) functional = true;

                // check Backspace, Tab, Enter, Delete, and left/right arrows
                if (code ==  8) functional = true;
                if (code ==  9) functional = true;
                if (code == 13) functional = true;
                if (code == 46) functional = true;
                if (code == 37) functional = true;
                if (code == 39) functional = true;
                // Minus Sign, Plus Sign
                if (allowNegative && (code == 189 || code == 109)) functional = true; // dash as well
                if (insertPlusSign && (code == 187 || code == 107)) functional = true;

                if (!functional)
                {
                    e.preventDefault();
                    e.stopPropagation();
                    if (str!=newValue) obj.val(newValue);
                }

            }

            // inster formatted price as a value of an input field
            function price_it ()
            {
                var str = obj.val();
                var price = price_format(str);
                if (str != price) obj.val(price);
            }

            // Add prefix on focus
            function add_prefix()
            {
                var val = obj.val();
                obj.val(prefix + val);
            }

            function add_suffix()
            {
                var val = obj.val();
                obj.val(val + suffix);
            }

            // Clear prefix on blur if is set to true
            function clear_prefix()
            {
                if($.trim(prefix) != '' && clearPrefix)
                {
                    var array = obj.val().split(prefix);
                    obj.val(array[1]);
                }
            }

            // Clear suffix on blur if is set to true
            function clear_suffix()
            {
                if($.trim(suffix) != '' && clearSuffix)
                {
                    var array = obj.val().split(suffix);
                    obj.val(array[0]);
                }
            }

            // bind the actions
            $(this).bind('keydown.price_format', key_check);
            $(this).bind('keyup.price_format', price_it);
            $(this).bind('focusout.price_format', price_it);

            // Clear Prefix and Add Prefix
            if(clearPrefix)
            {
                $(this).bind('focusout.price_format', function()
                {
                    clear_prefix();
                });

                $(this).bind('focusin.price_format', function()
                {
                    add_prefix();
                });
            }

            // Clear Suffix and Add Suffix
            if(clearSuffix)
            {
                $(this).bind('focusout.price_format', function()
                {
                    clear_suffix();
                });

                $(this).bind('focusin.price_format', function()
                {
                    add_suffix();
                });
            }

            // If value has content
            if ($(this).val().length>0)
            {
                price_it();
                clear_prefix();
                clear_suffix();
            }

        });

    };

    /**********************
    * Remove price format *
    ***********************/
    $.fn.unpriceFormat = function(){
      return $(this).unbind(".price_format");
    };

    /******************
    * Unmask Function *
    *******************/
    $.fn.unmask = function(){

        var field = $(this).val();
        var result = "";

        for(var f in field)
        {
            if(!isNaN(field[f]) || field[f] == "-") result += field[f];
        }

        return result;
    };

})(jQuery);

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="format.js"></script>
 <script type="text/javascript">

            $(function(){



                $('#price').priceFormat({
                      prefix: '',

                    thousandsSeparator: ',',
                    lakhsSeparator: "'"
                });
 $('#price1').priceFormat({
                      prefix: '',

                    thousandsSeparator: ''
                });
                });



        </script>
</head>

<body>
<input type="text" id="price">
</body>
</html>

why this is not working ? kindly advise me.

Why is which part of the (much too long) code not working? Do you receive errors? Could you narrow down the question? — feeela, Jul 19 '13 at 12:38
@feeela that this is actually for the thousand separator, i got changed it to lakhs separator, after that thousand separator not working with lakhs separator, lakhs separator only working. i need to work both thousand and lakhs separator as combined like (32'32,232.33), no there is no error. — jothikannan, Jul 19 '13 at 12:46
Please select an accepted answer if any one of them are acceptable. Otherwise, comment so this question can be closed one way or another. Thanks. — Yanick Rochon, Jul 29 '13 at 03:45
Please don't dump entire source code of a plugin in question. if a tag is available tag it else provide a link to the plugin... — T J, Dec 17 '14 at 13:23

madhu131313 · Accepted Answer · 2013-07-19T13:17:44.737

1

You just have to add thousandsCount%5==0 to the original http://jquerypriceformat.com/txt/jquery.price_format.1.8.js_.txt to get the lakhs count

if (thousandsCount%3==0 || thousandsCount%5==0 ) char_ = thousandsSeparator+char_;
                        thousandsFormatted = char_+thousandsFormatted;

This is what your code doing.

For example the number be 1234567.89

With Thousands formatting the the number changes to 1,234,67.89
Again in step 2,your code is again formatting the number to 12,34567.89 but it is not taking the number 1,234,67.89 as input but the original integer value that is 1234567
In Return you are getting the output 12,34567.89 and not your desired output 1,2,34,567.89 ( Ofcourse your question is asking that )

edited Jul 19 '13 at 13:17

answered Jul 19 '13 at 13:08

madhu131313

7,003
7
40
53

Thanks... now it is working for lakhs only , if we give large number it seems doesn't work it show like this 2,3,32,323.23 , advise me please – jothikannan Jul 19 '13 at 13:26
That is the number formatted in thousands and lakhs,how do you want that number to be ? If not this 2,3,32,323.23, what ? – madhu131313 Jul 19 '13 at 13:28
i nedd like this hundred: 100.00 thousand: 1,000.00 lakhs:1'00,000.00 and 10'00,000.00 and so on... – jothikannan Jul 19 '13 at 13:47
Use this , you can see indian currency demo there http://www.decorplanit.com/plugin/ ,finally if you feel my answer as worthy vote my answer and check it out as answer :) – madhu131313 Jul 19 '13 at 13:55
Hi sorry, already i have checked it, and i want just the number to be formatted for all the currency's not only indian rupee, also there in the demo it is only working with lakhs only – jothikannan Jul 19 '13 at 14:05
here are some other plugins I found http://plugins.jquery.com/autoNumeric/ , https://code.google.com/p/jquery-formatcurrency/wiki/InternationalSupport – madhu131313 Jul 19 '13 at 14:26

score 0 · Answer 2 · edited May 23 '17 at 11:49

In Chrome 28, the following will work:

Number(123456789).toLocaleString("bn-IN-u-nu-latn")
>> 12,34,56,789

The trick here is that since the en-IN locale specifies xxx,xxx,xxx formatting, we use the Bengali locale, with the locale extension u-nu-latn asking for Latin numbers.

This does not seem to work in Firefox or IE, even IE10.

This is obviously making use of the ECMAScript Internationalization API. See Is there an i18n (Intl) shim for JavaScript?, javascript number/currency formatting, etc.

Personally I have not seen the 1'23,456 format using the apostrophe, but if you really want that, you'll have to go back to rolling your own, since the ECMAScript Internationalization API provides no support for custom formats.

score 0 · Answer 3 · answered Jul 19 '13 at 15:19

Instead of reimplementing the wheel, just grab jQuery Globalize and use the built-in formatters. Also, using Globalize, your app will be localizable ready.

var price = Globalize.format( 123456789.00, "c", "bn-IN");  
//-> "টা 12,34,56,789.00"

Note that Globalize works with jQuery UI widgets, like the spinner for example.

score 0 · Answer 4 · answered Aug 09 '13 at 12:14

I have modified the plugin which you are using. It will format the number like 1,23,45,678.90. Added a new useLakhs flag so remember to use that also. Comparing the original code and the changes I have made will give you an idea what was wrong.

/*

* Price Format jQuery Plugin
* Created By Eduardo Cuducos cuducos [at] gmail [dot] com
* Currently maintained by Flavio Silveira flavio [at] gmail [dot] com
* Version: 1.7
* Release: 2012-02-22

* original char limit by Flavio Silveira <http://flaviosilveira.com>
* original keydown event attachment by Kaihua Qi
* keydown fixes by Thasmo <http://thasmo.com>
* Clear Prefix on Blur suggest by Ricardo Mendes from PhonoWay
* original allow negative by Cagdas Ucar <http://carsinia.com>
* keypad fixes by Carlos Vinicius <http://www.kvinicius.com.br> and Rayron Victor
* original Suffix by Marlon Pires Junior
* CentsLimit set to zero fixed by Jereon de Jong
* original idea for the use of the plus sign

*/

(function($) {

/****************
* Main Function *
*****************/
$.fn.priceFormat = function(options)
{

    var defaults =
    {
        prefix: 'US$ ',
        suffix: '',
        centsSeparator: '.',
        thousandsSeparator: ',',
        useLakhs: false,
        lakhsSeparator: ",",
        limit: false,
        centsLimit: 2,
        clearPrefix: false,
        clearSufix: false,
        allowNegative: false,
        insertPlusSign: false
    };

    var options = $.extend(defaults, options);

    return this.each(function()
    {
        // pre defined options
        var obj = $(this);
        var is_number = /[0-9]/;

        // load the pluggings settings
        var prefix = options.prefix;
        var suffix = options.suffix;
        var centsSeparator = options.centsSeparator;
        var thousandsSeparator = options.thousandsSeparator;
        var lakhsSeparator = options.lakhsSeparator;
        var limit = options.limit;
        var centsLimit = options.centsLimit;
        var clearPrefix = options.clearPrefix;
        var clearSuffix = options.clearSuffix;
        var allowNegative = options.allowNegative;
        var insertPlusSign = options.insertPlusSign;
        var useLakhs = options.useLakhs;

        // If insertPlusSign is on, it automatic turns on allowNegative, to work with Signs
        if (insertPlusSign) allowNegative = true;

        // skip everything that isn't a number
        // and also skip the left zeroes
        function to_numbers (str)
        {
            var formatted = '';
            for (var i=0;i<(str.length);i++)
            {
                char_ = str.charAt(i);
                if (formatted.length==0 && char_==0) char_ = false;

                if (char_ && char_.match(is_number))
                {
                    if (limit)
                    {
                        if (formatted.length < limit) formatted = formatted+char_;
                    }
                    else
                    {
                        formatted = formatted + char_;
                    }
                }
            }

            return formatted;
        }

        // format to fill with zeros to complete cents chars
        function fill_with_zeroes (str)
        {
            while (str.length < (centsLimit+1)) str = '0' + str;
            return str;
        }

        // format as price
        function price_format(str)
        {
            // formatting settings
            var formatted = fill_with_zeroes(to_numbers(str));
            var thousandsFormatted = '';
            var thousandsCount = 0;
            var lakhsFormatted = '';
            var lakhsCount = 0;

            // Checking CentsLimit
            if(centsLimit == 0)
            {
                centsSeparator = "";
                centsVal = "";
            }

            // split integer from cents
            var centsVal = formatted.substr(formatted.length - centsLimit, centsLimit);
            var integerVal = formatted.substr(0, formatted.length - centsLimit);

            // apply cents pontuation
            formatted = (centsLimit == 0) ? integerVal : integerVal + centsSeparator + centsVal;

            // apply thousands pontuation
            if (thousandsSeparator || $.trim(thousandsSeparator) != "")
            {
                for (var j = integerVal.length; j > 0; j--)
                {
                    char_ = integerVal.substr(j - 1, 1);
                    thousandsCount++;
                    if (thousandsCount % 3 == 0) char_ = thousandsSeparator + char_;
                    thousandsFormatted = char_ + thousandsFormatted;
                }

                if (thousandsFormatted.substr(0, 1) == thousandsSeparator) 
                    thousandsFormatted = thousandsFormatted.substring(1, thousandsFormatted.length);

                formatted = (centsLimit == 0) ? thousandsFormatted : thousandsFormatted + centsSeparator + centsVal;
            }

            // apply lakhs pontuation
            if (useLakhs &&(lakhsSeparator || $.trim(lakhsSeparator) != ""))
            {
                var flag = false;
                for (var j = integerVal.length; j > 0; j--)
                {
                    char_ = integerVal.substr(j - 1, 1);
                    lakhsCount++;
                    if (lakhsCount % 3 == 0 && !flag) {char_ = thousandsSeparator + char_; flag = true;}
                    else if ((lakhsCount - 3) % 2 == 0 && flag) char_ = lakhsSeparator + char_;
                    lakhsFormatted = char_ + lakhsFormatted;
                }

                if (lakhsFormatted.substr(0, 1) == lakhsSeparator) 
                    lakhsFormatted = lakhsFormatted.substring(1, lakhsFormatted.length);

                formatted = (centsLimit == 0) ? lakhsFormatted : lakhsFormatted + centsSeparator + centsVal;
            }


            // if the string contains a dash, it is negative - add it to the begining (except for zero)
            if (allowNegative && str.indexOf('-') != -1 && (integerVal != 0 || centsVal != 0))
                formatted = '-' + formatted;
            else if (insertPlusSign && (integerVal != 0 || centsVal != 0))
                formatted = '+' + formatted;

            // apply the prefix
            if (prefix) formatted = prefix + formatted;

            // apply the suffix
            if (suffix) formatted = formatted + suffix;

            return formatted;
        }

        // filter what user type (only numbers and functional keys)
        function key_check (e)
        {
            var code = (e.keyCode ? e.keyCode : e.which);
            var typed = String.fromCharCode(code);
            var functional = false;
            var str = obj.val();
            var newValue = price_format(str + typed);

            // allow key numbers, 0 to 9
            if((code >= 48 && code <= 57) || (code >= 96 && code <= 105)) functional = true;

            // check Backspace, Tab, Enter, Delete, and left/right arrows
            if (code ==  8) functional = true;
            if (code ==  9) functional = true;
            if (code == 13) functional = true;
            if (code == 46) functional = true;
            if (code == 37) functional = true;
            if (code == 39) functional = true;

            // Minus Sign, Plus Sign
            if (allowNegative && (code == 189 || code == 109)) functional = true; // dash as well
            if (insertPlusSign && (code == 187 || code == 107)) functional = true;

            if (!functional)
            {
                e.preventDefault();
                e.stopPropagation();
                if (str!=newValue) obj.val(newValue);
            }
        }

        // inster formatted price as a value of an input field
        function price_it ()
        {
            var str = obj.val();
            var price = price_format(str);
            if (str != price) obj.val(price);
        }

        // Add prefix on focus
        function add_prefix()
        {
            var val = obj.val();
            obj.val(prefix + val);
        }

        function add_suffix()
        {
            var val = obj.val();
            obj.val(val + suffix);
        }

        // Clear prefix on blur if is set to true
        function clear_prefix()
        {
            if($.trim(prefix) != '' && clearPrefix)
            {
                var array = obj.val().split(prefix);
                obj.val(array[1]);
            }
        }

        // Clear suffix on blur if is set to true
        function clear_suffix()
        {
            if($.trim(suffix) != '' && clearSuffix)
            {
                var array = obj.val().split(suffix);
                obj.val(array[0]);
            }
        }

        // bind the actions
        $(this).bind('keydown.price_format', key_check);
        $(this).bind('keyup.price_format', price_it);
        $(this).bind('focusout.price_format', price_it);

        // Clear Prefix and Add Prefix
        if(clearPrefix)
        {
            $(this).bind('focusout.price_format', function()
            {
                clear_prefix();
            });

            $(this).bind('focusin.price_format', function()
            {
                add_prefix();
            });
        }

        // Clear Suffix and Add Suffix
        if(clearSuffix)
        {
            $(this).bind('focusout.price_format', function()
            {
                clear_suffix();
            });

            $(this).bind('focusin.price_format', function()
            {
                add_suffix();
            });
        }

        // If value has content
        if ($(this).val().length>0)
        {
            price_it();
            clear_prefix();
            clear_suffix();
        }
    });
};

/**********************
* Remove price format *
***********************/
$.fn.unpriceFormat = function(){
  return $(this).unbind(".price_format");
};

/******************
* Unmask Function *
*******************/
$.fn.unmask = function(){

    var field = $(this).val();
    var result = "";

    for(var f in field)
    {
        if(!isNaN(field[f]) || field[f] == "-") result += field[f];
    }

    return result;
};

})(jQuery);

$(function(){
$('#price').priceFormat({
    prefix: 'Rs. ',
    thousandsSeparator: ',',
    lakhsSeparator: "'",
    useLakhs: true
});
});

Let me know how this worked for you.

Jquery price format with lakhs separator?

4 Answers4

This is what your code doing.