0

Estoy haciendo un formulario dinámico, este me agrega filas y me calcula un subtotal por fila y un total general como se muestra en la imagen, hasta este punto no hay ningún problema, sin embargo si yo elimino una fila el total final no se actualiza es decir para este caso si yo elimino mi ultima fila el total debería cambiar a 15, sin embargo se queda con el valor anterior, alguien podría ayudarme a detectar que estoy haciendo mal introducir la descripción de la imagen aquí

Anexo mi código con el cual agrego filas y calculo el subtotal y total correspondiente

//Agregamos filas
$(document).ready(function () {
    var maxField = 10;
    var addButton = $('.add_button');
    var wrapper = $('.field-wrapper');
    var fieldHTML = '<div class="grupos">' +
                        '<div class="col-md-7 col-sm-7 col-xs-12">' +
                        '<input type="text" name="descripcion[]" id="descripcion" class="form-control col-md-7 col-xs-12" placeholder="Descripción"/>' +
                        '</div>' +
                        '<div class="col-md-1 col-sm-1 col-xs-12">' +
                        '<input type="text" id="unidad" name="unidad[]" class="form-control col-md-7 col-xs-12" placeholder="Unidad">' +
                        '</div>' +
                        '<div class="col-md-1 col-sm-1 col-xs-12">' +
                        '<input type="text" id="cantidad" name="cantidad[]" class="form-control col-md-7 col-xs-12" title="cantidad" placeholder="Cantidad"/>' +
                        '</div>' +
                        '<div class="col-md-1 col-sm-1 col-xs-12">' +
                        '<input type="text" name="pu[]" class="form-control col-md-7 col-xs-12" title="pu" placeholder="P. U."/>' +
                        '</div>' +
                        '<div class="col-md-1 col-sm-1 col-xs-12">' +
                        '<h5 title="subtotal" class="sum-group">0</h5>' +
                        '</div>' +
                        '&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" class="btn btn-sm btn-danger remove_button" title="Remove field"><i class="fa fa-close"></i></a><br><br>' +
                    '</div>';

    var x = 1;
    $(addButton).click(function(){
        if (x < maxField){
            x++;
            $(wrapper).append(fieldHTML);
        }
    });

//Removemos la fila
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });

//Seccion de operaciones
    $(document).on('keyup', ".grupos", function (){
        //Calculamos el subtotal por fila
        var cantidad = $(this).find("input[title=cantidad]").val();
        var pu = $(this).find("input[title=pu]").val();
        $(this).find("[title=subtotal]").html(parseInt(cantidad) * parseInt(pu));


    //Calculamos el total de todos los grupos
        var total=0;
        $(".grupos .sum-group").each(function(){
            total += parseInt($(this).html());
            document.getElementById("total").value = total;
        })
    });
});
4
  • Si metés el codigo de calcular el total dentro de una funcion, y la ejecutas dentro del codigo que se encarga de eliminar un elemento, no deberia funcionar?
    – Agustin G.
    Commented el 25 oct. 2019 a las 22:23
  • @Mani Ya lo intente amigo, en este caso el total no se calcula a menos de que elimine una fila antes Commented el 25 oct. 2019 a las 22:25
  • Pero tenes que llamarla tambien cuando se carga la tabla, y cada vez que se inserta un elemento. Haciendo eso presentaba esos errores que nombras?
    – Agustin G.
    Commented el 25 oct. 2019 a las 22:27
  • 1
    @Mani Me faltaba esa parte, mientras se agreguen cantidades se calcula el total en el evento keyup y si elimino una fila el total se vuelve a calcular pero ahora en la funcion onclick que hace referencia a la eliminacion de la fila, ya ha quedado resuelto, muchas gracias Commented el 25 oct. 2019 a las 22:30

1 respuesta 1

0

Lo que sucede es que debes INFORMAR al total que se ha eliminado la fila y programar su actualización. Hay muchas formas para hacer ello. Podrías disparar el evento "keyup" (que es lo que desencadena el cálculo) en el manejador del evento click que borra una fila. Algo así:

$(wrapper).on('click', '.remove_button', function(e){
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
    $(document).trigger('keyup');
});

Esto tiene un defecto, es que también se ejecutaría OTRA VEZ el resto del manejador que definiste para el evento KeyUp. Otra alternativa para ello es hacer la operación directamente en el manejador del evento click del botón '.remove_button' e insertar ese valor en el total:

$(wrapper).on('click', '.remove_button', function(e){
    e.preventDefault();

    var valueActualTotal = document.getElementById("total").value
    var valorFila = $(this).parent('div').find('h5 [title="subtotal"]').text()
    valueActualTotal = valueActualTotal - parseFloat(valorFila)

    $(this).parent('div').remove();
    x--;
});

Pero para ambos casos no veo necesario el uso de la variable "x", quizá querrás que el valor del total "reaccione" a los cambios de "x". Eso es otro paradigma de programación basada en eventos y observadores. Si esa es tu intención entonces te recomiendo este blog: https://medium.com/@osmancea/programación-reactiva-en-javascript-997478d45bfb

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.