1

Tenho o seguinte formulário:

inserir a descrição da imagem aqui

Meu objetivo é pegar o valor Total e ao selecionar o campo de juros ou de desconto, calcular com esse valor com o valor Total (caso haja juros ou desconto) e esse resultado, calcular com o valor de parcelas (caso seja selecionado) e o valor final aparecer nos campos do valor Final e o valor das parcelas já calculados no valor das parcelas.

Isso é possível fazer com jquery ou javascript?

O código segue abaixo:

<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>
4
  • Se o seu objetivo for somente mostrar o resultado das operações na tela, sim é possível. 24/04/2019 às 13:28
  • Olá Deividson. Teria como me mostrar um exemplo? Pois não sou muito bom em Jquery e Javascript.
    – user24136
    24/04/2019 às 13:34
  • 1
    Coloca o html referente a pagina para facilitar na montagem de um exemplo 24/04/2019 às 13:44
  • Que descuido meu Leonardo. Realmente acabei esquecendo de incluir o HTML. Fiz o ajuste no Post. Obrigado por me atentar a esse detalhe.
    – user24136
    24/04/2019 às 13:51

2 Respostas 2

1

De um modo bem simples para começar o desenvolvimento

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

Com isso já é possível você começar o desenvolvimento e qualquer dificuldade podemos ajudar.

Complementando a resposta.

Você pode usar a função ".on" com os parâmetros focus ou input.

o focus ele executa o script quando o campo selecionado perde o foco (redundante), ou seja se você digitar o valor e teclar tab por exemplo o campo perde o foco e o script é executado. Ex:

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

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

O input ele vai executar o script a cada valor imputado no campo texto. se o valor a ser informado for 100 (por exemplo) o script será chamado 3 vezes. A primeira passando o valor 1, a segunda o valor 10 e a terceira o valor 100. Ou seja, a cada numero informado o valor do calculo é alterado.

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

  //Insere no campo resposta
  $('#IdValorFinal').val(valorTotal);
});
3
  • Olá Deividson. Certo. Mas como seria no caso dos preenchidos nos campos de juros ou descontos serem calculados automaticamente no campo dos resultados? Me refiro ao valor aparecer automaticamente no campo e não o cálculo propriamente dito, ou seja, ao digitar 10%, o resultado aparecer automaticamente nos campos das parcelas e valor total.
    – user24136
    24/04/2019 às 17:05
  • Pois não será usado botão para efetuar os cálculos, mas apenas na passagem de campos (tab por ex.:)
    – user24136
    24/04/2019 às 17:21
  • Atualizei a resposta com o relação a sua dúvida. Como antes, não postei o código resolvido só o exemplo de como ser feito. 25/04/2019 às 17:04
0

Consegui resolver pelo Javascript, mesmo parecendo funcionar corretamente os cálculos, porém gostaria de pedir se possível aos colegas para me corrigirem, pois não trabalho muito com essa linguagem, ficando dessa forma:

<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>

Mesmo os resultados estarem funcionando, gostaria de colocar como monetário no valor total e das parcelas.

inserir a descrição da imagem aqui

1

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