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??
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>
$('#portion').change(function(){ var valor = parseFloat($('#total').val()) var parcela = parseInt($('#portion').val()) var total = valor / parcela $('#moneypar').text(total) });
Commented
12/09/2017 às 21:04
input
. O change
só dispara depois de deixares o foco do elemento.
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);
});
.toFixed(2)
em totalParcela
para retornar apenas 2 casas decimais no valor das parcelas.
$('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