1

Como faço para formatar o valor de dois input no formato de moeda arredondando os valores.

Por exemplo, se a comissão é 1200 o retorno do input ir e valor líquido dão 18% e 1.182, mas quando é um valor quebrado, por exemplo 22.051,56, o resultado sai 330.77340000000004% e 21.720,787, teria que mostrar 330,77 e 21.720,79. Tem alguma forma de formatar esse tipo de resultado no javascript ou algum outro jeito?

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

0

2 Respostas 2

4

Para formatar numeros simples como a percentagem podes usar o toFixed(2). Para formatar o valor em dinheiro podes configurar melhor o .toLocaleString() com minimumFractionDigits e maximumFractionDigits

Exemplo:

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>

2
  • Opa deu certo amigo..aproveitando o assunto, os inputs neste caso quando o usuário esta digitando vai aparecendo os valores, e se caso eu fosse editar uma comissão, o campo valor comissão já ia vim preenchido certo? mas os inputs nao, só se eu digitasse alguma coisa, porem acho que eu deveria usar outro tipo de evento que nao seja o keyup..você sabe qual evento para que a função js ja seja executada quando fosse editar? Commented 26/09/2017 às 14:38
  • @SmokeRohden os eventos estão certos. Nesse caso terias de ter .addEventListener('keyup' para os outros inputs também, e refazer a conta partindo desse input que recebeu a mudança.
    – Sergio
    Commented 26/09/2017 às 14:39
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>

Em primeiro lugar formatamos o resultado com toFixed(2) para exibir com duas casas decimais. Logo a seguir fazemos um replace para substitui o separador decimal ponto por virgula, e finalmente aplicamos a regex (/\B(?=(\d{3})+(?!\d))/g, ".").

Essa regex combina recursivamente - com a flag g (global) - fazendo um Lookahead positivo (?=(\d{3})+(?!\d)) - uma sequencia de 3 dígitos (\d{3}) desde que não haja nenhum digito à direita (?!\d) desta sequencia - e que não seja inicio ou fim da cadeia \B

Lookahead é uma forma de casar strings que tenham ou não um determinado final. É utilizado (?=...) para o positivo, ou seja, que terminem com, e (?!...) para o negativo, ou seja, que não termina com.

0

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .