1

Estoy haciendo un formulario dinámico donde puedo agregar varios renglones de productos a una compra con la función Append, y sin problemas ya lo inserto a mi BD.

Ahora bien, en cada renglón tengo un select para escoger un producto, del cual debe modificar el valor de un segundo select (el lote de cada producto), esto lo realizo a través de una consulta a la BD. Sin embargo,me está funcionando unicamente para el primer renglón, es decir, la primera fila, el resto de las filas que agrego con el método Append, no me funciona.

Si alguien me pudiera ayudar, se lo agradezco, tengo casi 2 semanas atascado en este punto

Explicación

Este es el código HTML

    <table id="tablaDetallesCompras" class="table table-striped table-bordered table-condensed" style="width:100%">
    <tr class="text-center">
        <th>Categoría / Producto / Laboratorio</th>
        <th>Número de Lote</th>
        <th>Número de Lote</th>
        <th>Fecha de Vencimiento</th>
        <th>Acción</th>
    </tr>            
    <tr>
        <td>
            <select class="form-control" id="id_producto" name="id_producto[]">
                <option selected>Seleccione...</option>
                <?php
                    foreach($data_productos as $dat3){
                        $id_producto = $dat3['id_producto'];
                        $desc_producto = $dat3['desc_producto_lab'];
                ?>
                <option value="<?php echo $id_producto; ?>">
                    <?php echo $desc_producto; ?>
                </option>
            <?php }?>
            </select>
        </td>
        <td>
            <select class="form-control" id="id_lote" name="id_lote[]">
                <option>Seleccione...</option>
            </select>
        </td>
        <td><input type="text" id="num_lote" name="num_lote[]" class="form-control"></td>  
        <td><input type="date" id="fecha_vencimiento" name="fecha_vencimiento[]" class="form-control"></td>
        <td><button class="btn btn-primary addItemBtn" id="addItemBtn">(+)</button></td> 
    </tr>
    </table>

Con este fragmento agrego las filas por Append, estan incluidas en el tag script de HTML

var form_detalle = `
    <tr>
        <td>
            <select class="form-control" id="id_producto2" name="id_producto[]">
                <option selected>Seleccione...</option>
                <?php
                    foreach($data_productos as $dat3){
                        $id_producto = $dat3['id_producto'];
                        $desc_producto = $dat3['desc_producto_lab'];
                ?>
                <option value="<?php echo $id_producto; ?>">
                    <?php echo $desc_producto; ?>
                </option>
            <?php }?>
            </select>
        </td>
        <td>
            <select class="form-control" id="id_lote2" name="id_lote[]">
                <option>Seleccione...</option>
            </select>
        </td>
        <td><input type="text" id="num_lote" name="num_lote[]" class="form-control"></td>  
        <td><input type="date" id="fecha_vencimiento" name="fecha_vencimiento[]" class="form-control"></td>
        <td><button class="btn btn-danger removeItemBtn" id="removeItemBtn">(-)</button></td> 
    </tr> `;

var max = 4;
var x = 1;


$(".addItemBtn").click(function(e){
    e.preventDefault();
    if(x <= max){
        $("#tablaDetallesCompras").append(form_detalle);      
        x++;
    }     
});

Y este es la funcion javascript para buscar

$('#tablaDetallesCompras').on('change', '#id_producto', function(e){
    var id_producto = $(this).val();
    
    $.ajax({
        data: {id_producto:id_producto},
        dataType: 'html',
        method: 'POST',
        url: 'get_lotes.php',
    }).done(function(data){
        $("#id_lote").html(data);
    });  
});

1 respuesta 1

1

El texto en la variable form_detalle contiene un select y varios inputs donde la id es fija. Puesto que no debe haber ID repetidos en el documento, al buscar por ID obtienes el primer elemento encontrado en el documento y el resto es ignorado. Podrías hacer algo como:

function templateToAppend(idCount) {
    return `
    <tr>
        <td>
            <select class="form-control" id="id_producto_${idCount}" name="id_producto_${idCount}[]">
                ...
            </select>
        </td>
        <td>
            <select class="form-control" id="id_lote_${idCount}" name="id_lote_${idCount}[]">
                <option>Seleccione...</option>
            </select>
        </td>
        <td><input type="text" id="num_lote_${idCount}" name="num_lote_${idCount}[]" class="form-control"></td>  
        <td><input type="date" id="fecha_vencimiento_${idCount}" name="fecha_vencimiento_${idCount}[]" class="form-control"></td>
        <td><button class="btn btn-danger removeItemBtn" id="removeItemBtn_${idCount}">(-)</button></td> 
    </tr> `;
}

const MAX = 4;
let x = 1;


$(".addItemBtn").click(function (e) {
    e.preventDefault();
    if (x <= MAX) {
        $("#tablaDetallesCompras").append(templateToAppend(x));
        x++;
    }
});
1
  • Entiendo, como podría modificar el ID de mi <select> para buscar el resto de las filas que vaya agregando con el método append? Commented el 16 oct. 2022 a las 16:49

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.