Get calculated values of two inputs and subtract for another input

1

I have a form that has a field filled with value from the database. In this form, I have to make 2 percentage accounts, take these two values to add and finally get the start value and subtract from the sum of the percentages.

I set up the fields, but javascript could not work. Can it be with JQuery ?

$("#percentual1").change(function () {
                    var valor = $("#valor").val();                     
                    var resultado1 = valor * (parseInt($(this).val()) / 100);
                    var resultado1Arrendodado = parseFloat(resultado1.toFixed(2));
                    $("#valor1").val(resultado1Arrendodado);
                    var ValorFinal1 = parseFloat($('#valor1').val());
                    var Valor1Arrendodado = parseFloat(ValorFinal1.toFixed(2));
                    var Valor2 = parseFloat(0.00);
                    var TotalSobra = Valor1Arrendodado + Valor2;
                    if (Number.isNaN(TotalSobra)) {
                        TotalSobra = 0;
                        $('#valorSobra').val(TotalSobra);
                    } else {
                        $('#valorSobra').val(TotalSobra);
                    }
                });
                $("#percentual2").change(function () {
                    var valor = $("#valor").val();
                    var resultado2 = valor * (parseInt($(this).val()) / 100);
                    var resulado2Arrendodado = parseFloat(resultado2.toFixed(2));
                    $("#valor2").val(resulado2Arrendodado);
                    var Valor1 = parseFloat($('#valor1').val());
                    var Valor1Arrendodado = parseFloat(Valor1.toFixed(2));
                    var Valor2 = parseFloat($('#valor2').val());
                    var Valor2Arrendodado = parseFloat(Valor2.toFixed(2));
                    var TotalSobra = Valor1Arrendodado + Valor2Arrendodado;
                    if (Number.isNaN(TotalSobra)) {
                        TotalSobra = 0;
                        $('#valorSobra').val(TotalSobra);
                    } else {
                        $('#valorSobra').val(TotalSobra);
                    }
                });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="row">
 <div class="form-group col-md-4">
 <label for="valor">Valor (R$)</label>                               
 <input type="text" class="form-control" name="valor" id="valor"  value="69.00" readonly >
</div>
<div class="form-group col-md-4">
<label for="percentual1">1ºPercentual (%)</label>                                
<input type="text" class="form-control " name="percentual1" id="percentual1" title="Informe o percentual" placeholder="0.00 %"  >
</div>
<div class="form-group col-md-4">
<label for="valor1">Valor 1</label>                                
<input type="text" class="form-control" name="valor1" id="valor1"  placeholder="0.00" readonly >
</div>                                    
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="valor">Valor (R$)</label>                                
<input type="text" class="form-control" name="valor" id="valor"  value="69.00" placeholder="0.00" readonly >
</div>
<div class="form-group col-md-4">
<label for="percentual2">2º Percentual (%)</label>                               
<input type="text" class="form-control" name="percentual2" id="percentual2" placeholder="0.00%"  >
 </div>
 <div class="form-group col-md-4">      
 <label for="valor2">Valor 2</label>                                
 <input type="text" class="form-control" name="valor2" id="valor2"  placeholder="0.00" readonly >
 </div>                                    
 </div>

 <div class="row">
 <div class="form-group col-md-4">
 <label for="valor">Valor (R$)</label>                                
 <input type="text" class="form-control" name=valor" id="valor"  value="69.00" placeholder="0.00" readonly >
                                    </div>

<div class="form-group col-md-4">
<label for="valorSobra">Valor Sobra</label>                                
<input type="text" class="form-control " name="valorSobra" id="valorSobra" >
 </div>                                    
 </div>
    
asked by anonymous 18.11.2016 / 23:21

1 answer

1

As said in the comment .toFixed (2) adding the toFixed it will round the value.

Here is the working code.

$("#percentual1").change(function () {
                    var valor = $("#valor").val();                     
                    var resultado1 = valor * (parseInt($(this).val()) / 100);
                    var resultado1Arrendodado = parseFloat(resultado1.toFixed(2));
                    $("#valor1").val(resultado1Arrendodado);
                    var ValorFinal1 = parseFloat($('#valor1').val());
                    var Valor1Arrendodado = parseFloat(ValorFinal1.toFixed(2));
                    var Valor2 = parseFloat(0.00);
                    var TotalSobra = Valor1Arrendodado + Valor2;
                    if (Number.isNaN(TotalSobra)) {
                        TotalSobra = 0;
                        $('#valorSobra').val(TotalSobra);
                    } else {
                        $('#valorSobra').val(TotalSobra);
                    }
                });
                $("#percentual2").change(function () {
                    var valor = $("#valor").val();
                    var resultado2 = valor * (parseInt($(this).val()) / 100);
                    var resulado2Arrendodado = parseFloat(resultado2.toFixed(2));
                    $("#valor2").val(resulado2Arrendodado);
                    var Valor1 = parseFloat($('#valor1').val());
                    var Valor1Arrendodado = parseFloat(Valor1.toFixed(2));
                    var Valor2 = parseFloat($('#valor2').val());
                    var Valor2Arrendodado = parseFloat(Valor2.toFixed(2));
                    var TotalSobra = Valor1Arrendodado + Valor2Arrendodado;
                    if (Number.isNaN(TotalSobra)) {
                        TotalSobra = 0;
                        $('#valorSobra').val(TotalSobra.toFixed(2));
                    } else {
                        $('#valorSobra').val(TotalSobra.toFixed(2));
                    }
                });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="row">
 <div class="form-group col-md-4">
 <label for="valor">Valor (R$)</label>                               
 <input type="text" class="form-control" name="valor" id="valor"  value="69.00" readonly >
</div>
<div class="form-group col-md-4">
<label for="percentual1">1ºPercentual (%)</label>                                
<input type="text" class="form-control " name="percentual1" id="percentual1" title="Informe o percentual" placeholder="0.00 %"  >
</div>
<div class="form-group col-md-4">
<label for="valor1">Valor 1</label>                                
<input type="text" class="form-control" name="valor1" id="valor1"  placeholder="0.00" readonly >
</div>                                    
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="valor">Valor (R$)</label>                                
<input type="text" class="form-control" name="valor" id="valor"  value="69.00" placeholder="0.00" readonly >
</div>
<div class="form-group col-md-4">
<label for="percentual2">2º Percentual (%)</label>                               
<input type="text" class="form-control" name="percentual2" id="percentual2" placeholder="0.00%"  >
 </div>
 <div class="form-group col-md-4">      
 <label for="valor2">Valor 2</label>                                
 <input type="text" class="form-control" name="valor2" id="valor2"  placeholder="0.00" readonly >
 </div>                                    
 </div>

 <div class="row">
 <div class="form-group col-md-4">
 <label for="valor">Valor (R$)</label>                                
 <input type="text" class="form-control" name=valor" id="valor"  value="69.00" placeholder="0.00" readonly >
                                    </div>

<div class="form-group col-md-4">
<label for="valorSobra">Valor Sobra</label>                                
<input type="text" class="form-control " name="valorSobra" id="valorSobra" >
 </div>                                    
 </div>
    
21.11.2016 / 16:58