jquery function calculate dynamic percentage

Question

jquery function calculate dynamic percentage

Navigation

#1 by (0 votes)

1

This is the problem:

I have #producto_1 , #producto_2 and #producto_3 , each one has inputs to fill in automatically.

The way to calculate the net is: bruto*merma/100 , as I have to add more #producto_n I want it to work more than 1 or 2 times calling the function from: onchange="calculaNeto()

If there is a better method, I am not closed to progress, thanks in advance

function calculaNeto() {
         var bruto = $(this).parent().next().find("input").val();
         var mermas = $(this).val();
         var merma = 100-mermas;
         var neto = bruto*(merma/100);
         $(this).parents().next().find("input").val(neto);
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="producto_1" class="row">
<div id="colusku_1" class="col-sm-2">
             <label>Peso bruto</label>
             <input type='number' class='form-control' name='bruto1' id='colsku_1'  required>
           </div>
           <div id="colucant_1" class="col-sm-1">
             <label>% Merma</label>
             <input type='number' class='form-control' name='perdida1' id='colcant_1' onchange="calculaNeto()" required>
           </div>
           <div id="colucost_1" class="col-sm-2">
             <label>Peso Neto <sup>auto</sup> </label>
             <input type='number' class='form-control' name='neto1' id='colcost_1' required>
           </div>
      </div>
<div id="producto_2" class="row">
<div id="colusku_2" class="col-sm-2">
             <label>Peso bruto</label>
             <input type='number' class='form-control' name='bruto1' id='colsku_2'  required>
           </div>
           <div id="colucant_2" class="col-sm-1">
             <label>% Merma</label>
             <input type='number' class='form-control' name='perdida2' id='colcant_2' onchange="calculaNeto()" required>
           </div>
           <div id="colucost_2" class="col-sm-2">
             <label>Peso Neto <sup>auto</sup> </label>
             <input type='number' class='form-control' name='neto2' id='colcost_2' required>
           </div>
      </div>

jquery

asked by Marco Torres 02.09.2018 в 21:32

source

1 answer

How to send input values type "hidden" ajax? Uncaught TypeError: Can not read property 'getFile' of undefined [duplicated]

score 0 · Accepted Answer

I recommend that instead of working it through onclick since it is not good practice at all, instead, you could assign a class to div father, and to each of the three input that you handle. That way, using jQuery it's easy to get what you want.

//Ejecuto si cambia cualquier elemento con clase pesoBruto o merma
jQuery('.pesoBruto , .merma').on('change',function()
{

      //Obtengo el valor bruto
      var bruto = $(this).closest('.producto').children('.pesoBruto').val();
      //Obtengo %Merma
      var merma = $(this).closest('.producto').children('.merma').val();

      //En caso de que alguno de los dos este en blanco, el neto estará en blanco.
      if(bruto.length==0 || merma.length==0){
        $(this).closest('.producto').children('.neto').val("");
        return;
      }

      //Realizo el cálculo
      var neto = bruto*merma/100;

      //Lo muestro en el div neto
      $(this).closest('.producto').children('.neto').val(neto);

});

input
{
width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="producto">
  <label>Peso bruto</label>
  <input type="number" class="pesoBruto">
  <label>%Merma</label>
  <input type="number" class="merma">
  <label>Peso neto</label>
  <input type="text" readonly="readonly" class="neto">
</div>

<hr>

<div class="producto">
    <label>Peso bruto</label>
    <input type="number" class="pesoBruto">
    <label>%Merma</label>
    <input type="number" class="merma">
    <label>Peso neto</label>
    <input type="text" readonly="readonly" class="neto">
</div>

Notice, that the code is not very complex, to get the values of both bruto and merma use function closest(selector) to find the div with class .producto nearest, then with children(selector) I find the input I need to perform the calculation

I hope it's clear!