0

Tenho um Form com 3 input

1 Valor total

2 parcelas

3 Valor da Parcela

Estou precisando que ao colocar o valor total e o numero de parcelas, já preencha o valor da parcela.

alguém tem alguma solução em JavaScript ou Jquery??

3 Respostas 3

2

Isso é simples, basta ter auscultadores de eventos que acionem quando houver input nos inputs e convertam esse input para numeros.

Um exemplo seria assim:

var inputs = document.querySelectorAll('input');
var total = inputs[0];
var parcelas = inputs[1];
var valorParcelas = inputs[2];

total.addEventListener('input', calcular);
parcelas.addEventListener('input', calcular);

function calcular() {
  valorParcelas.value = Number(total.value || 0) / Number(parcelas.value || 1);
}
label {
  display: block;
  margin: 5px;
}
<label>Total: <input type="text"/></label>
<label>Parcelas: <input type="text"/></label>
<label>Valor da parcela: <input type="text"/></label>

5
  • Estou tentando fazer essa forma $('#portion').change(function(){ var valor = parseFloat($('#total').val()) var parcela = parseInt($('#portion').val()) var total = valor / parcela $('#moneypar').text(total) });
    – Jean Prado
    Commented 12/09/2017 às 21:04
  • @JeanPrado ok, se preferes usar jQuery tudo ok. Conseguiste por a funcionar?
    – Sergio
    Commented 12/09/2017 às 21:17
  • @JeanPrado aqui na Suécia onde vivo já é tarde. Dou uma olhada aqui depois. Mas acho que é melhor usares o evento input. O change só dispara depois de deixares o foco do elemento.
    – Sergio
    Commented 12/09/2017 às 21:22
  • sim usei o exemplo do Lucas
    – Jean Prado
    Commented 12/09/2017 às 21:22
  • Fico grato, o change está muito lento o calculo.
    – Jean Prado
    Commented 12/09/2017 às 21:24
0

Desse modo, ao executar um evento na parcela, já calcula o valor por parcela.

<input type="text" placeholder="Valor Total" id="total">
<input type="text" placeholder="Quantidade parcela" id="parcela">
<input type="text" placeholder="Valor por Parcela" id="valorParcela">

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

$('#parcela').change(function(){
var valor        = parseFloat($('#total').val());
var parcela      = parseInt($('#parcela').val());
var totalParcela = valor / parcela;
$('#valorParcela').val(totalParcela);
});
4
  • isso, deu certo, mas está muito lento o calculo.
    – Jean Prado
    Commented 12/09/2017 às 21:14
  • Eu adicionaria .toFixed(2) em totalParcela para retornar apenas 2 casas decimais no valor das parcelas.
    – Sam
    Commented 12/09/2017 às 21:49
  • Vlw DVdsamm, ficou bem melhor.
    – Jean Prado
    Commented 13/09/2017 às 12:00
  • Jean depois dessa alteração que o Dvdsamm falou, ficou mais funcional? Commented 13/09/2017 às 19:19
0

$('button').click(function(){
  var valor   = parseFloat($('#total').val())
  var parcela = parseInt($('#parcela').val())
  var total = valor / parcela
  $('#valorParcela').text(total)
  
})
  <input type="text" placeholder="valor Total" id="total">
  <input type="text" placeholder="valor Total" id="parcela">
  <div id="valorParcela"></div>
  <button>Gerar</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Segue um exemplo

Você deve fazer log-in para responder a esta pergunta.

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