0

Ola, estoy intentando hacer ciertos cálculos con inputs dinámicos en javascript, anteriormente alguien de aquí me ayudó con un problema similar, espero me puedan ayudar con este:

Tengo el siguiente HTML:

                 <div class="ing_guiGrid col6">
                    <p>
                      <label for="id_observa">Observaciones:</label>
                      <textarea name="observa[]" cols="40" rows="10" maxlength="500" required="required" id="id_observa_0"></textarea>
                    </p>
                    <p>
                      <label for="id_tipo_envio">Envio:</label>
                      <input type="number" name="tipo_envio[]" required="required" id="id_tipo_envio_0" class="tipo_envio">
                    </p>
                    <p>
                      <label for="id_descripcion">Descripcion:</label>
                      <input type="text" name="descripcion[]" maxlength="150" required="required" id="id_descripcion_0" class="descripcion">
                    </p>
                    <p>
                      <label for="id_cantidad">Cantidad:</label>
                      <input type="number" name="cantidad[]" min="0" value="0" required="required" id="id_cantidad_0" class="cantidad">
                    </p>
                    <p>
                      <label for="id_peso">Peso:</label>
                      <input type="number" name="peso[]" min="0" value="0" step="any" required="required" id="id_peso_0" class="peso">
                    </p>
                    <p>
                      <label for="id_precio">Tarifa:</label>
                      <input type="number" name="precio[]" min="0" value="0" step="any" required="required" id="id_precio_0" class="precio">
                    </p>
               </div>
                  <div id="newRow"></div>
                  <div>
                    <button id="addRow" type="button" class="btn btn-info"><i class="fas fa-plus">agregar</i></button>
                  </div>
<div class="ing_guiGrid col3 anim hide">
                    <p>
                        <label for="id_observa">No. Boleta Contra Entrega:</label>
                        <input type="text" name="boleta_cte" cols="40" rows="10" maxlength="500"  id="id_boleta_cte">
                    </p>
                    <p>
                        <label for="id_tipo_envio">Valor Total Envio:</label>
                        <input type="text" name="ptpae" id="id_ptpae">
                    </p>
                    <p>
                        <label for="id_descripcion">Comision:</label>
                        <input type="text" name="comision" maxlength="150" id="id_comision">
                    </p>
                </div>
<div class="ing_guiGrid col1  alt1">
                    <p>
                        <label for="descuento">Descuento</label>
                        <input type="number" class="form-control" min="0" name="descuento" value="0.00" id="id_descuento">
                    </p>
                    <p>
                        <label for="sub_total">Sub Total</label>
                        <input type="number" title="No puedes modificar este campo" class="form-control" name="sub_total" id="id_sub_total" placeholder="Sub Total" value="0.00" readonly>
                    </p>
                    <p>
                        <label for="total">Total</label>
                        <input type="number" title="No puedes modificar este campo" class="form-control" name="total" id="id_total" placeholder="Total" value="0.00" readonly>
                    </p>
                </div>

Éste lo único que hace es mostrarme los input al entrar a la página. Se mira así: introducir la descripción de la imagen aquí

Y Tengo la siguiente función:

    var contador = 0
    $("#addRow").click(function () {
        contador++
        var html = '';
        html += `<div class="ing_guiGrid col6">
        <p><button id="removeRow" type="button" class="btn btn-danger"><i class="fas fa-times-circle">eliminar</i></button></p>
        <p><input type="number" name="tipo_envio[]" required="required" id="id_tipo_envio_` + contador + `" class="tipo_envio"></p>
        <p><input type="text" name="descripcion[]" maxlength="150" required="required" id="id_descripcion_` + contador + `" class="descripcion"></p>
        <p><input type="number" name="cantidad[]" min="0" value="0" required="required" id="id_cantidad_` + contador + `" class="cantidad"></p>
        <p><input type="number" name="peso[]" min="0" value="0" step="any" required="required" id="id_peso_` + contador + `" class="peso"></p>
        <p><input type="number" name="precio[]" min="0" value="0" step="any" required="required" id="id_precio_` + contador + `" class="precio"></p>
        </div>`;
        $('#newRow').append(html);

        var a = document.querySelectorAll(".tipo_envio")
        a.forEach(function(e){
            e.addEventListener('change', function(){
                buscarProducto(e.id)
            })
        })
    });

    // remove row
    $(document).on('click', '#removeRow', function () {
        $(this).closest('.ing_guiGrid').remove();
        // contador--
    });

Lo que hace es crear una fila de input para hacer ciertos cálculos. La función que realiza estos cálculos es la siguiente:

function calcular_detalle(){
        var cant = $("#id_cantidad_0").val();
        var prec =$('#id_precio_0').val();
        var desc = $('#id_descuento_0').val();
        var vte = $('#id_ptpae_0').val();
        var comi = $('#id_comision_0').val();       
        var res = vte * 0.05;

        var stotal = cant * prec;
        var total  = stotal - desc;

        $('#id_sub_total').val(stotal);
        $('#id_total').val(total);
        
    }

Esta lo que calcula es la cantidad que haya escrito el usuario en #id_cantidad_0 y lo multiplica con la cantidad de #id_precio_0 y lo muestra en en el subtotal.

Luego si el usuario quisiese (los datos de estos inputs quedan a disposición del usuario ya que puede ignorarlos o puede llenarlos) tienes los input #id_ptpae y #id_comision que hacen otro cálculo, su función es la siguiente:

        function calcular_comi(){
        var vte = $('#id_ptpae').val();
        var comi = $('#id_comision').val();       
        var res = vte * 0.05;

        var total  = $('#id_sub_total').val() - $('#id_descuento').val() + res;

        $('#id_comision').val(res);
        $('#id_total').val(total);
    }

Escribe en el input de total el resultado de subtotal menos el descuento que el usuario le ponga y suma la variable res que es el 5% de la cantidad escrita en #id_ptpae. Llamo a estas funciones de la siguiente manera:

$("#id_precio_0").change(function(){
        calcular_detalle();
});
$("#id_ptpae").change(function(){
    calcular_comi();
});

Y todo eso me funciona de maravilla, el problema es cuando agrego la nueva fila de input, necesito que tenga la misma funcionalidad que la anterior, obviamente el usuario pone distintas cantidades en los nuevos input. Lo que no puedo hacer es que los input que se van agregando tengan la misma funcionalidad que los inputs que se muestran cuando se inicia la página, los inputs nuevos también tienen que agregar los resultados a los inputs de subtotal y total, como que sumando con el resultado de los inputs principales.

He pensado intentar con un forEach así:

var precio = document.querySelectorAll(".precio")
precio.forEach(function(e){
    e.addEventListener("change", function(){
         calcular_detalle();
    })
})

Pero no funciona, sé que es algo complicado y un poco abrumador, pero si alguien me pudiera ayudar estaría realmente agradecido.

1 respuesta 1

0

Intentaré darte un punto de vista distinto, quizá te sirva.
El flujo de tu programa es el siguiente.

1. Existe un grupo de inputs que se relacionan a un subtotal de una especie de factura
2. tu función calcular_detalle() llama a tu primer grupo de inputs a través de su id, que para el caso de la primera fila (row) se identifican con la siguiente estructura $("#id_campo_0")
3. una vez que se ejecutan los calculos sobre la fila, se añaden a los campos de total...

Siendo esto correcto, y si el código que compartes es fiel a lo que tienes en tu máquina, al intentar añadir al listener del change con el forEach tu función calcular_detalle() sigue ejecutando el calculo para los id estáticos del primer grupo $("#id_campo_0"), lo que perjudica el correcto funcionamiento de tu algoritmo en el paso 2, lo dicho podría no ser el único problema en tu código, pero sin dudas es algo que debes de tener en consideración, puesto que por más que "agregues la funcionalidad" al resto de tus inputs generados dinámicamente, estos seguirán realizando los cálculos en base al primer grupo de inputs de tu formulario.

Alguna posible solución



Sería añadir un parámetro a tu función, para que esta pueda acceder a cada uno de tus inputs con sus diferentes id's $("#id_campo_1") , $("#id_campo_2") , $("#id_campo_3") , algo como lo siguiente...

for(let i = 1 ; i <= contador ; i++ ){
  document.getElementById(`id_precio_${i}`).addEventListener("change", 
   event => {
    calcular_detalle(i);
  })
}

funcion calcular_detalle

function calcular_detalle(contador){
  var cant = $(`#id_cantidad_${contador}`).val();
  ....
  //more code//
}

Cuestión de que analices tu código poco a poco y adaptes lo necesario.

1
  • Muchas gracias por esa posible solución, la probaré y veré si me sirve para el resultado final:'D, gracias por responder. Commented el 28 feb. 2022 a las 23:22

Tu Respuesta

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

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