As I can format an integer, I need to visualize it as a price.
r = 100000;
comision = 10000;
totalp = r+comision;
document.getElementById("total").value = totalp;
Clearly the sum gives 110000
Resultado que quiero obtener en el input
$ 110,000.00
You can obtain using NumberFormat directly, using constuctor , the values to pass are style with value currency that specifies that it will be a format of divisas . currency to specify the currency to be used in this case will be Dollars, or use external libraries such as Numeral.js
$(function() {
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
r = 100000;
comision = 10000;
totalp = r+comision;
document.getElementById("total").value = formatter.format(totalp);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='' id="total"/>The code that I leave here in addition to formatting the field according to any mask you place also works as a calculator:
function MASK(form, n, mask) {
if (NUM(n)) {
dec = -1, point = 0;
x = mask.indexOf(".")+1;
if (x) { dec = mask.length - x; }
if (dec != -1) {
n = NUM(n, dec)+"";
x = n.indexOf(".")+1;
if (x) { point = n.length - x; } else { n += "."; }
} else {
n = NUM(n, 0)+"";
}
for (var x = point; x < dec ; x++) {
n += "0";
}
x = n.length, y = mask.length, XMASK = "";
while ( x || y ) {
if ( x ) {
while ( y && mask.charAt(y-1) == "," ) {
if ( n.charAt(x-1) != "-" )
XMASK = "," + XMASK;
y--;
}
XMASK = n.charAt(x-1) + XMASK; x--;
}
if ( y ) { y-- }
}
} else {
XMASK="";
}
if (form) {
form.value = XMASK;
if (NUM(n)<0) {
form.style.color="#FF0000";
} else {
form.style.color="#000000";
}
}
return XMASK;
}
// Convierte una cadena alfanumérica a numérica (incluyendo formulas aritméticas)
function NUM(s, dec) {
for (var s = s+"", num = "", x = 0 ; x < s.length ; x++) {
c = s.charAt(x);
if (".-+/*".indexOf(c)+1 || c != " " && !isNaN(c)) { num+=c; }
}
if (num)
num = eval(num);
if (num == "") { num=0; } else { num = parseFloat(num); }
if (dec != undefined) {
r=.5; if (num<0) r=-r;
e=Math.pow(10, (dec>0) ? dec : 0 );
return parseInt(num*e+r) / e;
} else {
return num;
}
}Calculadora:<br>
<input onChange="MASK(this, this.value, '##,###,##0.00')" style="text-align: right;"><br>
(Prueba colocando cualquier formula en el campo)Using JQuery:
$("#total").on({
"focus": function(event) {
$(event.target).select();
},
"keyup": function(event) {
$(event.target).val(function(index, value) {
return value.replace(/\D/g, "")
.replace(/([0-9])([0-9]{2})$/, '$1.$2')
.replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",");
});
}
});
<input id="total">
r = 100000;
comision = 10000;
totalp = r+comision;
document.getElementById("$"+"total").value = totalp;
Adapted from: How to make my input text have a separator of thousands and decimals in jquery?