Perform Jquery percentage calculation

Question

Perform Jquery percentage calculation

Asked 8 years ago

Viewed 3,391 times

2

Good afternoon, everyone.

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

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

How do I get the result value to be displayed 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>

4 answers

3

You can do so 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>

1

Exactly how I need it. Thanks @Junior

– Marcia Pereira Reis

2016/11/18 at 17:33
@Marciapereirareis if this answer helped you, mark it as solution on the left side of it, so that other people can be helped!

– JuniorNunes

2016/11/18 at 17:35

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by Gabriel Heguedusch • **186** points · Answer 1 · 2016-11-18T17:34:07+00:00

$("#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>
<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>

by Marco Vinicius Soares Dalalba • **1,232** points · Answer 2 · 2016-11-18T17:30:44+00:00

It would be something like that

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

by BrTkCa • **11,094** points · Answer 3 · 2016-11-18T17:32:30+00:00

$("#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>
<div class="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>