how to format text as a dollar currency using javascript or jquery?


I would like to format the input string in my textbox to dollar currency formatted text, so if I enter 100.00000 in it, output should be

$ 100.00 //

how can I achieve it using javascript or jquery?

 


Asked by:- manish
1
: 7357 At:- 10/3/2017 3:47:28 PM
javascript jquery formatting-text-as-currency







2 Answers
profileImage Answered by:- vikas_jk

You can create a javascript function  to format string into currency using textbox, let me give you complete details here

First Method: Using Javascript Number Object

var someNumber= 100;
"$"+Number((someNumber).toFixed(1)).toLocaleString();

//output
// $100.00

Second Method: Using Intl.NumberFormat in Javascript

// Create number formatter using Javascript Intl.NumberFormat API
var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

formatter.format(3500);

//output:
//  $3,500.00 

Third Method: Using CSS, and Custom Javascript function

Here is the complete code with HTML, CSS, javascript for the complete solution 

HTML

<div class="col-lg-10 MOnthly">
                <div class="input-box">
                    <input value=""  name="Monthly" id="Monthly" class="form-control"  />
                    <span class="unit">$</span>
                </div>
              
            </div>

CSS

.input-box {
    position: relative;
}


.unit {
    position: absolute;
    display: block;
    left: 5px;
    top: 8px;
    z-index: 9;
}

Javascript-jQuery code with function

 //Here is main function to format string, taken from stackoverflow answers

Number.prototype.formatMoney = function (c, d, t) {
            var n = this,
                c = isNaN(c = Math.abs(c)) ? 2 : c,
                d = d == undefined ? "." : d,
                t = t == undefined ? "," : t,
                s = n < 0 ? "-" : "",
                i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
                j = (j = i.length) > 3 ? j % 3 : 0;
            return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
        };



//This is jQuery part
 $(document).on('blur', "#Monthly", function () {

                        var Money = $(this).val();
                        Money = parseInt(Money,10).formatMoney(2);
                        $(this).val(Money);
 });

Here is the working fiddle link: https://jsfiddle.net/ub0cw3qw/2/

Please Note, in fiddle i have added both jQuery and bootstrap links to make it work
2
At:- 10/4/2017 4:10:34 PM Updated at:- 10/4/2017 4:20:38 PM


profileImage Answered by:- jaya

You can use .toFixed(2) to show formatted string upto two decimal using javascript

var value = 1555.223;
var num = '$' + value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

//output will be $ 1,555.22

and by using .replace() and regex, you can again ',' the above code shows the complete solution after adding both the requirements.

1
At:- 10/4/2017 11:25:31 AM Updated at:- 10/4/2017 3:53:40 PM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use