Home / Questions / 61744
Accepted
ByGroxD
Asked: 2020-04-10 11:48:44 +0800 CST 2020-04-10 11:48:44 +0800 CST

Format result Price

  • 772

How can I 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 gives110000

Resultado que quiero obtener en el input

$110,000.00

javascript

3 Answers

  1. Best Answer

    You can obtain using NumberFormat directly, Through the constuctor, the values ​​to pass are stylewith a value currencythat specifies that it will be a format of divisas. currencyto specify the currency to use in this case it 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"/>

    • 3

  2. The code that I leave you 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)

    • 2

  3. 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 thousand and decimal separator in jquery?

    • 1