jquery percentage calculation

Asked

Viewed 2,151 times

0

I have this code and put it in jsfiddle to facilitate understanding

http://jsfiddle.net/opeta/L7e73zx2/

It makes a calculation of percentages by adding in the value of the purchase price and puts the result in the sale price. It works if I put an entire number in the purchase price, but throughout the application I use maskmoney and do calculations with it, making it impossible to remove this mask. someone can help me in this matter?

javascript jquery

  • What should be the calculation formula? Exp: PC + (CE * 0,2) + ST + (IPI * 0,5)

  • would be PV = (PC * CE / 100) + (PC * ST / 100) + (PC * IPI / 100)

  • @opeta I did not understand your doubt, be clearer.

2 answers

1


opeta, try to do like this:

P.S.: $.fn.val is a workaround to be able to set the value of the input after applying the mask.

var originalVal = $.fn.val;
$.fn.val = function(value) {
    if (typeof value == 'undefined') {
        return originalVal.call(this);
    } else {
        setTimeout(function() {
            this.trigger('mask.maskMoney');
        }.bind(this), 100);
        return originalVal.call(this, value);
    }
};

function calcular(event) 
{   
    var inputs = {
        precoCompra: $('#precoCompra'),
        custoempresa: $('#custoempresa'),
        st: $('#st'),
        ipi: $('#ipi'),
        precoVenda: $('#precoVenda')
    };
    var valores  = {
        precoCompra: parseFloat(inputs.precoCompra.val()),
        custoempresa: parseFloat(inputs.custoempresa.val()),
        st: parseFloat(inputs.st.val()),
        ipi: parseFloat(inputs.ipi.val()),
        precoVenda: 0.0
    };  
    
    valores.custoempresa = isNaN(valores.custoempresa) ? 0.0 : valores.precoCompra * (valores.custoempresa / 100);
    valores.st = isNaN(valores.st) ? 0.0 : valores.precoCompra * (valores.st / 100);
    valores.ipi = isNaN(valores.ipi) ? 0.0 : valores.precoCompra * (valores.ipi / 100);
    
    valores.precoVenda = valores.precoCompra + valores.custoempresa + valores.st + valores.ipi;
    inputs.precoVenda.val(valores.precoVenda.toFixed(2));
}

$(document).ready(function(){
    var inputs = $(".money").maskMoney();
  
    var inputs = $("input[name='custoempresa'], input[name='st'], input[name='ipi'], input[name='precoCompra']");
    inputs.on({
        //keypress: calcular,
        keyup: calcular,
        //keydown: calcular,
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/plentz/jquery-maskmoney/master/dist/jquery.maskMoney.js"></script>
<div class="control-group">
    <label for="precoCompra" class="control-label">Preço de Compra<span class="required">*</span></label>
    <div class="controls">
        <input id="precoCompra" class="money" type="text" name="precoCompra" value=""  />
    </div>
</div>
<div class="control-group">
    <label for="custoempresa" class="control-label">Custo Empresa<span class="required">*</span></label>
    <div class="controls">
        <input id="custoempresa" type="text" name="custoempresa" value=""  />
    </div>
</div>
<div class="control-group">
    <label for="st" class="control-label">Subs. Tributária<span class="required">*</span></label>
    <div class="controls">
        <input id="st" type="text" name="st" value=""  />
    </div>
</div>
<div class="control-group">
    <label for="ipi" class="control-label">IPI<span class="required">*</span></label>
    <div class="controls">
        <input id="ipi" type="text" name="ipi" value=""  />
    </div>
</div>
<div class="control-group">
    <label for="precoVenda" class="control-label">Preço de Venda<span class="required">*</span></label>
    <div class="controls">
        <input id="precoVenda" class="money" type="text" name="precoVenda" value=""  />
    </div>
</div>

  • here is working out more when I play in the application for some reason ta doubling the number. if I type 33 in the purchase price is 33.33 :(

  • discovered the reason and I’ve corrected, thank you very much for your help.

1

Well, follow my version of your code(I was just finishing up when @Toby posted the answer)

I believe that the easiest thing would be to use the event onkeyup to receive the values of inputs, you can direct the account:

  var PV = (PC * CE / 100) + (PC * ST / 100) + (PC * IPI / 100);


(function($) {
  $("#precoCompra").maskMoney({thousands:'', decimal:'.', allowZero:true, suffix: ' R$'});
  $("#custoempresa").maskMoney({thousands:'', decimal:'.', allowZero:true, suffix: ' R$'});
  $("#st").maskMoney({thousands:'', decimal:'.', allowZero:true, suffix: ' R$'});
  $("#ipi").maskMoney({thousands:'', decimal:'.', allowZero:true, suffix: ' R$'});
})(jQuery);

function calcular(){
  var PC = $("#precoCompra").val().substring(0, $("#precoCompra").val().length-2);
  var CE = $("#custoempresa").val().substring(0, $("#custoempresa").val().length-2);
  var ST = $("#st").val().substring(0, $("#st").val().length-2);
  var IPI = $("#ipi").val().substring(0, $("#ipi").val().length-2);
  console.log(PC,CE,ST,IPI);
  var PV = (PC * CE / 100) + (PC * ST / 100) + (PC * IPI / 100);
  $("#precoVenda").html("R$ "+PV);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://plentz.github.io/jquery-maskmoney/javascripts/jquery.maskMoney.min.js"></script>
Preço de Compra* <br/><input id="precoCompra" class="money" type="text" name="precoCompra" onkeyup="calcular()"/>
<br/>
Custo Empresa* <br/><input id="custoempresa" type="text" name="custoempresa" onkeyup="calcular()"/>
<br/>
Subs. Tributária* <br/><input id="st" type="text" name="st" onkeyup="calcular()"/>
<br/>
IPI* <br/><input id="ipi" type="text" name="ipi" onkeyup="calcular()"/>
<br/>
Preço de Venda: <br/>
<label id="precoVenda" class="money" name="precoVenda"></label>

Browser other questions tagged javascript jquery

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