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: