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?
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
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.
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly