0

Buen día, actualmente genero una tabla dinamica de esta forma:

var formas_pagos = $('.formas_pagos');
                    $.each(response.data, function(index,value){
                        $('<tr>')
                            .append($('<td/>').addClass('nuevo-td nombrePago').text(value.forma_pago))
                            .append($('<td/>').addClass('nuevo-td cantPago').text(value.disponible.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')))
                            .append('<div class="cod_forma_pago" style="display:none">' + value.cod_forma_pago + '</div>')
                            .append('<div class="cod_banco" style="display:none">' + value.Cod_Banco + '</div>')
                            .append('<div class="monto_pago" style="display:none">' + value.monto_pago + '</div>')
                            .append($('<td/>').addClass('label-cell nuevo-td')
                                .append($('<label/>').addClass('label-checkbox item-content')
                                            .append('<input type="checkbox" name="tipo_pago" class="tipo_pago" value="' + value.disponible + '"/>')
                                            .append($('<span/>').addClass('item-media').append('<i class="icon icon-form-checkbox"></i>'))))
                            .append($('<td/>').addClass('label-cell')
                                                .append('<input type="number" name="cantidad" class="cantidad" placeholder="Cantidad">'))
                            .appendTo(formas_pagos);
                    });

Dicha tabla dinamica contiene checkbox class="tipo_pago", al seleccionar un checkbox ejecuto la siguiente función:

 $('.formas_pagos').on('click','.tipo_pago', function(e){
        if ($(this).is(':checked')){
            let tipo_pago           = $(this).closest('tr');
            let valor_pago          = tipo_pago.find('.tipo_pago').val();
            let nombrePago          = tipo_pago.find('.nombrePago').text();
            let cantPago            = tipo_pago.find('.cantPago').text();
            let cant_ingresada_pago = tipo_pago.find('.cantidad').text();
            let cod_forma_pago      = tipo_pago.find('.cod_forma_pago').text();
            let cod_banco           = tipo_pago.find('.cod_banco').text();
            console.log("CODIGO FORMA DE PAGO: "+cod_forma_pago);


            // monto = esta variable llevara el valor a ingresar o sumar segun lo que se deba cancelar
            $$('.formas_pagos_seleccionados > tr').remove();
            let formas_pagos_seleccionados = $('.formas_pagos_seleccionados');

            console.log("SE AGREGO LA FORMA DE PAGO");
            total_forma_pago += parseFloat(valor_pago);
            let resultado = total_pagar-total_forma_pago

            if (resultado<0){
                console.log("Excedio del pago");
            }
            else{
                if (resultado===0){
                    console.log("Cubre la deuda");
                }
                else{
                    console.log("RESTA DE TOTAL A PAGAR - LA FORMA DE PAGO: "+resultado.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
                    console.log("TOTAL DE PAGO: "+total_forma_pago.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
                    $('<tr class="pagos"/>')
                        .append($('<td>/').addClass('nuevo-td')
                            .append($('<label/>').addClass('label-radio item-content').text(nombrePago)))
                        .append($('<td/>').addClass('label-cell nuevo-td').text(cantPago))
                        .append($('<td/>').addClass('label-cell').append('<button value="' + cantPago + '" type="button" class="eliminarformaPago button button-fill button-raised button-circle" title="Comment"><i class="fa fa-trash-o"></i></button>'))
                        .appendTo(formas_pagos_seleccionados);
                //agregarformaPago(idPedido, cod_forma_pago, monton, cod_banco, fecha, numero_documento, autorizacion, cod_cliente);
                }
            }
        }
        else{
            console.log("Deschequeado");
            total_forma_pago -=parseFloat(total_forma_pago);
            console.log("TOTAL DE PAGO: "+total_forma_pago);
        }
        //e.preventDefault();
    });

El problema que quiero resolver es que al ingresar una cantidad en el input class="cantidad" ejecute la misma función anterior y realizar las mismas validaciones con el valor que obtengo de los check, con el valor que ingreso en el input. De esta forma queda visualmente: introducir la descripción de la imagen aquí

1 respuesta 1

1

Con jQuery puedes tener multiples selectores y multiples eventos en cada handler. Puedes ejecutar la misma funcion con este codigo, pero tendras que cambiar la funcion un poco:

var total_forma_pago = 0;
var response = {data: [{forma_pago: "cheque", disponible: 12, cod_forma_pago: 1, Cod_Banco: 1, monto_pago: 10.50}]};
var formas_pagos = $('.formas_pagos');
                    $.each(response.data, function(index,value){
                        $('<tr>')
                            .append($('<td/>').addClass('nuevo-td nombrePago').text(value.forma_pago))
                            .append($('<td/>').addClass('nuevo-td cantPago').text(value.disponible.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')))
                            .append('<div class="cod_forma_pago" style="display:none">' + value.cod_forma_pago + '</div>')
                            .append('<div class="cod_banco" style="display:none">' + value.Cod_Banco + '</div>')
                            .append('<div class="monto_pago" style="display:none">' + value.monto_pago + '</div>')
                            .append($('<td/>').addClass('label-cell nuevo-td')
                                .append($('<label/>').addClass('label-checkbox item-content')
                                            .append('<input type="checkbox" name="tipo_pago" class="tipo_pago" value="' + value.disponible + '"/>')
                                            .append($('<span/>').addClass('item-media').append('<i class="icon icon-form-checkbox"></i>'))))
                            .append($('<td/>').addClass('label-cell')
                                                .append('<input type="number" name="cantidad" class="cantidad" placeholder="Cantidad">'))
                            .appendTo(formas_pagos);
                    });

 $('.formas_pagos').on('click change','.tipo_pago, .cantidad', function(e){
        if ($(this).is(':checked')){
            let tipo_pago           = $(this).closest('tr');
            let valor_pago          = tipo_pago.find('.tipo_pago').val();
            let nombrePago          = tipo_pago.find('.nombrePago').text();
            let cantPago            = tipo_pago.find('.cantPago').text();
            let cant_ingresada_pago = tipo_pago.find('.cantidad').text();
            let cod_forma_pago      = tipo_pago.find('.cod_forma_pago').text();
            let cod_banco           = tipo_pago.find('.cod_banco').text();
            console.log("CODIGO FORMA DE PAGO: "+cod_forma_pago);


            // monto = esta variable llevara el valor a ingresar o sumar segun lo que se deba cancelar
            $('.formas_pagos_seleccionados > tr').remove();
            let formas_pagos_seleccionados = $('.formas_pagos_seleccionados');

            console.log("SE AGREGO LA FORMA DE PAGO");
            total_forma_pago += parseFloat(valor_pago);
            let resultado = total_pagar-total_forma_pago

            if (resultado<0){
                console.log("Excedio del pago");
            }
            else{
                if (resultado===0){
                    console.log("Cubre la deuda");
                }
                else{
                    console.log("RESTA DE TOTAL A PAGAR - LA FORMA DE PAGO: "+resultado.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
                    console.log("TOTAL DE PAGO: "+total_forma_pago.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
                    $('<tr class="pagos"/>')
                        .append($('<td>/').addClass('nuevo-td')
                            .append($('<label/>').addClass('label-radio item-content').text(nombrePago)))
                        .append($('<td/>').addClass('label-cell nuevo-td').text(cantPago))
                        .append($('<td/>').addClass('label-cell').append('<button value="' + cantPago + '" type="button" class="eliminarformaPago button button-fill button-raised button-circle" title="Comment"><i class="fa fa-trash-o"></i></button>'))
                        .appendTo(formas_pagos_seleccionados);
                //agregarformaPago(idPedido, cod_forma_pago, monton, cod_banco, fecha, numero_documento, autorizacion, cod_cliente);
                }
            }
        }
        else{
            console.log("Deschequeado");
            total_forma_pago -=parseFloat(total_forma_pago);
            console.log("TOTAL DE PAGO: "+total_forma_pago);
        }
        //e.preventDefault();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<table class="formas_pagos"></table>

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.