Formatting result to currency

Asked

Viewed 679 times

1

How do I format the value of two input in the currency format by rounding the values.

For example, if the commission is 1200 the return on input ir and valor líquido give 18% and 1.182, but when it is a broken value, for example 22.051,56, the result comes out 330.77340000000004% and 21.720,787, would have to show 330,77 and 21.720,79. Is there any way to format this type of result in javascript or some other way?

var inputs = document.querySelectorAll('form input');
var valor = inputs[0];
var ir = inputs[1];
var liquido = inputs[2];


function formatar$(nr) {
  return nr.toLocaleString('pt-BR');
}

valor.addEventListener('keyup', function() {
  var nr = Number(this.value);
  var _ir = nr * 1.5 / 100;
  ir.value = _ir + '%';
  liquido.value = formatar$(nr - _ir);
});

<form method="post" action="processa.php">
  <label>Valor comissão:</label>
  <input type="text" name="valor_comissao">

  <label>IR:</label>
  <input type="text">

  <label>Valor Líquido:</label>
  <input type="text">

  <button type="submit">Enviar</button>
</form>

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

javascript html

2 answers

4


To format simple numbers as the percentage you can use toFixed(2). To format the value in cash you can better configure the .toLocaleString() with minimumFractionDigits and maximumFractionDigits

Example:

const [valor, ir, liquido] = [...document.querySelectorAll('form input')];

function formatar$(nr) {
  return nr.toLocaleString('pt-BR', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
}

valor.addEventListener('keyup', function() {
  const nr = Number(this.value);
  const _ir = nr * 1.5 / 100;
  ir.value = _ir.toFixed(2) + '%';
  liquido.value = formatar$(nr - _ir);
});
<form method="post" action="processa.php">
  <label>Valor comissão:</label>
  <input type="text" name="valor_comissao">

  <label>IR:</label>
  <input type="text">

  <label>Valor Líquido:</label>
  <input type="text">

  <button type="submit">Enviar</button>
</form>

  • Opa worked out, buddy. taking advantage of the subject, the inputs in this case when the user is typing the values will appear, and if I were to edit a commission, the commission value field would already come filled in right? but not inputs, only if I typed something, however I think I should use another type of event than keyup.. you know which event the js function is already running when editing?

  • @Smokerohden the events are right. In that case you would have to have .addEventListener('keyup' for the other inputs as well, and remake the account from that input that received the change.

1

var inputs = document.querySelectorAll('form input');
var valor = inputs[0];
var ir = inputs[1];
var liquido = inputs[2];

valor.addEventListener('keyup', function() {
  var nr = Number(this.value);
  var _ir = nr * 1.5 / 100;
  ir.value = _ir.toFixed(2) + '%';
  var liquidos = (nr - _ir).toFixed(2);
  liquidos=liquidos.replace(".", ",");
  liquidos=(liquidos).replace(/\B(?=(\d{3})+(?!\d))/g, ".");
  liquido.value = (liquidos);

});
<form method="post" action="processa.php">
  <label>Valor comissão:</label>
  <input type="text" name="valor_comissao">

  <label>IR:</label>
  <input type="text">

  <label>Valor Líquido:</label>
  <input type="text">

  <button type="submit">Enviar</button>
</form>

First of all we format the result with toFixed(2) to display with two decimal places. Next we make a replace to replace the decimal separator point by comma, and finally apply the regex (/\B(?=(\d{3})+(?!\d))/g, ".").

This regex recursively combines - with the flag g (global) - doing a positive Lookahead (?=(\d{3})+(?!\d)) - a sequence of 3 digits (\d{3}) as long as there is no digit on the right (?!\d) of this sequence - and that it is not start or end of the chain \B

Lookahead is a way of marrying strings that have a certain ending or not. It is used (?=...) for the positive, that is, ending with, and (?!...) for the negative, that is, it does not end with the negative.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.