1

Este es el problema:

Tengo #producto_1, #producto_2 y #producto_3, cada uno tiene inputs a rellenar de forma automática.

La forma de calcular el neto es: bruto*merma/100, como tengo para agregar mas #producto_n quiero que funcione mas de 1 o 2 veces llamando la función desde: onchange="calculaNeto()

Si hay un metodo mejor, no estoy cerrado al progreso, gracias de antemano

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>

1 respuesta 1

0

te recomiendo que en lugar de trabajarlo por medio de onclick ya que no es para nada buena práctica, en cambio, podrías asignar una clase al div padre, y a cada uno de los tres input que manejas. De esa manera, usando jQuery es sencillo llegar a lo que pretendes.

//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>

Fijate, que el código no es muy complejo, para obtener los valores tanto de bruto como de merma uso la función closest(selector) para hallar el div con clase .producto más cercano, luego con children(selector) ubico el input que necesito para realizar el cálculo

Espero que quede claro!

1
  • 1
    Gracias, me sirvio mucho, de paso apprendí algo, muchas gracias. el 3 sep. 2018 a las 20:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.