Calculate interest or discounts + the amount of installments with Jquery or Javascript

Question

I have the following form:

My goal is to take the value Total and when selecting the field of interest or discount, calculate with this value with the value Total (if there is interest or discount) and this result, calculate with the value of installments (if selected) and the final value appears in the Final value fields and the value of the plots already calculated in the value of the plots.

This is possible with jquery or javascript?

The code goes below:

<div class="form-group"><label>Valor Total: </label><input type="text" class="form-control" value="R$ <?php echo number_format($peTotalAberto->ValorTotal,2,",","."); ?>" readonly></div>
<div class="form-group">
    <div class="col-md-12">
    <input type="radio" name="JurosDesconto" onclick="desabilitarJurosDesconto(0)"> <label>Juros: <small>Cobrar após o vencimento</small></label>
    <div class="input-group" style="width: 30%">
            <input type="number" name="Juros" id="juros" class="form-control" min="0" max="100" value="0" onKeyPress="if(this.value.length==2) return false;" disabled>
                <span class="input-group-addon" id="basic-addon2">%</span>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-md-12">
    <input type="radio" name="JurosDesconto" onclick="desabilitarJurosDesconto(1)"> <label>Desconto:</label>
    <div class="input-group" style="width: 30%">
            <input type="number" name="Desconto" id="desconto" class="form-control" min="0" max="100" value="0" onKeyPress="if(this.value.length==2) return false;" disabled>
                <span class="input-group-addon" id="basic-addon2">%</span>
        </div>
    </div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="checkbox" name="QTDParcelas" id="qtdParcelas" onclick="desabilitarQtdParcelas()"> <label>Qtd. de parcelas:</label>
    <div class="input-group" style="width: 30%">
    <input type="number" name="QuantidadeParcelas" id="parcelas" class="form-control" min="0" max="100" value="0" onKeyPress="if(this.value.length==2) return false;" disabled>
    </div>
</div>
</div> 
<div class="form-group" style="margin-top: 10px">
  <label for="nomealuno" class="control-label">Valor Final: <span style="color: red">*</span></label>
  <input type="text" name="ValorFinal" id="valorFinal" class="form-control" required="required">
</div>
<div class="form-group">
  <label for="nomealuno" class="control-label">Valor das parcelas: <span style="color: red">*</span></label>
  <input type="text" name="ValorParcelas" id="valorParcelas" class="form-control" required="required">
</div>

Answer 1

In a very simple way to start development

$(document).ready(function(){
  //Pega valor do campo texto referenciado pelo id
  var total = $("#IdValorTotal").val();

  //Retorna se o checkbox está selecionado (refenciado pelo id) retornando true ou false
  var isJuros = $("#IdCampoJuros").prop("checked");

  if(idjuros){
    //Lógica dos calculos
  }

  //Preenche campo texto com o resultado dos calculos
  //variavel usada no calculo
  $("#IdValorFinal").val(resultadoDosCalculos);
});

With this it is already possible you start the development and any difficulty we can help.

Complementing the answer.

You can use the ". on" function with the Focus or input parameters.

Focus runs the script when the selected field loses focus (redundant), ie if you type the value and type tab for example the field loses focus and the script runs. Ex:

$("$IdValorTotal").on('focus', function(){
  //Pega valor digitado
  var valorTotal = $(this).val();

  //Insere no campo resposta
  $('#IdValorFinal').val(valorTotal);
});

The input will execute the script to each imputed value in the text field. if the value to be informed is 100 (for example) the script will be called 3 times. The first passing the value 1, the second the value 10 and the third the value 100. That is, at each number informed the value of the calculation is changed.

$("$IdValorTotal").on('input', function(){
  //Pega valor digitado
  var valorTotal = $(this).val();

  //Insere no campo resposta
  $('#IdValorFinal').val(valorTotal);
});

Answer 2

I was able to solve by Javascript, even though it seems to work correctly the calculations, but I would like to ask if possible colleagues to correct me, because I don’t work much with this language, staying that way:

<div class="container somar">
 <form method="post" style="margin-top: 10px">
 <div class="form-group"><label>Valor Total: </label><input type="text" id="valorTotal" class="form-control" value="12000.00" onchange="calcular()"></div>
<div class="form-group">
    <div class="col-md-12">
    <input type="radio" name="JurosDesconto" onclick="desabilitarJurosDesconto(0)"> <label>Juros: <small>Cobrar após o vencimento</small></label>
    <div class="input-group" style="width: 30%">
            <input type="number" name="Juros" id="juros" class="form-control" min="0" max="100" value="0" onKeyPress="if(this.value.length==2) return false;" onchange="calcular()" disabled>
                <span class="input-group-addon" id="basic-addon2">%</span>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-md-12">
    <input type="radio" name="JurosDesconto" onclick="desabilitarJurosDesconto(1)"> <label>Desconto:</label>
    <div class="input-group" style="width: 30%">
            <input type="number" name="Desconto" id="desconto" class="form-control" min="0" max="100" value="0" onKeyPress="if(this.value.length==2) return false;" onchange="calcular()" disabled>
                <span class="input-group-addon" id="basic-addon2">%</span>
        </div>
    </div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="checkbox" name="QTDParcelas" id="qtdParcelas" onclick="desabilitarQtdParcelas()"> <label>Qtd. de parcelas:</label>
    <div class="input-group" style="width: 30%">
    <input type="number" name="QuantidadeParcelas" id="parcelas" class="form-control" min="0" max="100" value="0" onKeyPress="if(this.value.length==2) return false;" onchange="calcular()">
    </div>
</div>
</div> 
<div class="form-group" style="margin-top: 10px">
  <label for="nomealuno" class="control-label">Valor Final: <span style="color: red">*</span></label>
  <input type="text" name="ValorFinal" id="valorFinal" class="form-control" onchange="calcular()" required="required">
</div>
<div class="form-group">
  <label for="nomealuno" class="control-label">Valor das parcelas: <span style="color: red">*</span></label>
  <input type="text" name="ValorParcelas" id="valorParcelas" class="form-control" onchange="calcular()" required="required" onchange="calcular()">
</div>
 </form>
 </div>
<script type="text/javascript" src="<?php echo $caminhoAbsoluto; ?>/assets/js/jquery-1.4.2.js"></script>
<script type="text/javascript">
  function calcular(){
    var valor1  = parseFloat(document.getElementById('valorTotal').value);// valor total
    var valor2  = parseInt(document.getElementById('juros').value); // juros
    var valor3  = parseInt(document.getElementById('desconto').value); // descontos
    var valor4  = parseInt(document.getElementById('parcelas').value); // parcelamento

    if (!isNaN(valor1) && !isNaN(valor2) && !isNaN(valor3) && !isNaN(valor4)){
        if(valor2){
           var valorT = (valor1 * (valor2/100)) + valor1;
        }
        if(valor3){
            var valorT = (valor1 * (valor3/100)) - valor1;            
        } 
        if(valor4){
            var valorP = valor1 / valor4;
            if(valor2){
               var valorPP = (valorP * (valor2/100)) + valorP;
            }else if(valor3){   
               var valorPP = (valorP * (valor3/100)) - valorP;
            }else{
                var valorPP = valorP;
            }
        }       
        document.getElementById('valorFinal').value = parseFloat(Math.abs(valorT));
        if(!isNaN(valorPP)){
           document.getElementById('valorParcelas').value = parseFloat(Math.abs(valorPP));
        }
  }
}
</script>

Even if the results are working, I would like to put as monetary the total value and the installments.