Dynamically Place Plot Value

Question

I have a form with 3 input

1 Total value

2 plots

3 Value of the Tranche

I am specifying that by placing the total value and the number of installments, already fill in the value of the installment.

someone has some solution in Javascript or Jquery??

Answer 1

This is simple, just have event headphones that trigger when there is input on inputs and convert this input to numbers.

An example would be like this:

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>

Answer 2

$('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>

Follow an example

Answer 3

Thus, when executing an event in the plot, it already calculates the value per plot.

<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);
});