Performing Jquery Percentage Calculation

Question

Performing Jquery Percentage Calculation

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (2 votes)
#4 by (1 votes)

2

Good afternoon guys.

I have a field with readonly value. This field is already populated with data from my bank.

I have another field, where I will enter the percentage value.

How do I make the value of the result appear in the other field?

<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="80.00" size="15" maxlength="25" placeholder="0.00" readonly>
    </div>
    <div class="form-group col-md-4">
        <label for="percentual">Percentual (%)</label>
        <input type="text" class="form-control" name="percentual" id="percentual" title="Informe o percentual" size="15" maxlength="25" placeholder="0.00%">
    </div>
    <div class="form-group col-md-4">
        <label for="resultado">Resultado</label>
        <input type="text" class="form-control" name="resultado" id="resultado" title="Informe o percentual" size="15" maxlength="25" placeholder="R$ 0.00">
    </div>
</div>

javascript jquery

asked by anonymous 18.11.2016 / 18:24

4 answers

3

$("#percentual").on('input',function() {
	var Valor = $("#valor").val();
  var Porcentagem = $("#percentual").val();
  var resultado = (Valor * Porcentagem) / 100;
  $("#resultado").val(resultado)
});

<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="80.00" size="15" maxlength="25" placeholder="0.00" readonly >
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="percentual">Percentual (%)</label>                                
                                        <input type="text" class="form-control" name="percentual" id="percentual" title="Informe o percentual"  size="15" maxlength="25" placeholder="0.00%"  >
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="resultado">Resultado</label>                                
                                        <input type="text" class="form-control" name="resultado" id="resultado" title="Informe o percentual" size="15" maxlength="25" placeholder="R$ 0.00"  >
                                    </div>                                    
</div>

18.11.2016 / 18:34

2

It would be something like this

$(document).ready(function(){
    $("#percentual").change(function(){
      var valor = $("#valor").val();
      $("#resultado").val(valor * (parseInt($(this).val())/100));
    })
})

<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="80.00" size="15" maxlength="25" placeholder="0.00" readonly >
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="percentual">Percentual (%)</label>                                
                                        <input type="text" class="form-control" name="percentual" id="percentual" title="Informe o percentual"  size="15" maxlength="25" placeholder="0.00%"  >
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label for="resultado">Resultado</label>                                
                                        <input type="text" class="form-control" name="resultado" id="resultado" title="Informe o percentual" size="15" maxlength="25" placeholder="R$ 0.00"  >
                                    </div>                                    
</div>

18.11.2016 / 18:30

1

$("#percent").change(function() {
  if (parseFloat($(this).val()) <= 100) {
    var porcentagem = (parseFloat($("#valor").val()) * parseFloat($(this).val())) / 100;
    $("#resultado").val(porcentagem);
  }
});

<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 id="valor" type="text" class="form-control" name="valor" id="valor" value="80.00" size="15" maxlength="25" placeholder="0.00" readonly>
  </div>
  <div class="form-group col-md-4">
    <label for="percentual">Percentual (%)</label>
    <input id="percent" type="text" class="form-control" name="percentual" id="percentual" title="Informe o percentual" size="15" maxlength="25" placeholder="0.00%">
  </div>
  <div class="form-group col-md-4">
    <label for="resultado">Resultado</label>
    <input id="resultado" type="text" class="form-control" name="resultado" id="resultado" title="Informe o percentual" size="15" maxlength="25" placeholder="R$ 0.00">
  </div>
</div>

18.11.2016 / 18:32

Monitoring internet connection at run time Why does the comparison of different objects return true?

score 3 · Accepted Answer

You can do this without jquery:

document.getElementById('percentual').onkeyup = function() {
  var valor = parseFloat(document.getElementById('valor').value);
  document.getElementById('resultado').value = valor * (parseFloat(this.value)/100);
}

<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="80.00" size="15" maxlength="25" placeholder="0.00" readonly >
  </div>
  <div class="form-group col-md-4">
    <label for="percentual">Percentual (%)</label>                                
    <input type="text" class="form-control" name="percentual" id="percentual" title="Informe o percentual"  size="15" maxlength="25" placeholder="0.00%"  >
  </div>
  <div class="form-group col-md-4">
    <label for="resultado">Resultado</label>                                
    <input type="text" class="form-control" name="resultado" id="resultado" title="Informe o percentual" size="15" maxlength="25" placeholder="R$ 0.00"  >
  </div>                                    
</div>