1

I'm developing an application, where I have a dropdown, whose content shows a number with the change. All in a dynamic form with Jquery and the append() method.

The problem is that it works for me in the first field of the form, but after I add with append the function cargaLotes() does not work. Please help

This is the code:

    </tr>            
    <tr>
        <td>
            <select class="form-control" id="id_producto" name="id_producto[]" onchange="cargaLotes();">
                <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>
    <center>
        <button type="submit" class="btn btn-success w-10" id="addCompra" name="addCompra">Registrar compra</button>
    </center>
</div>
    
function cargaLotes(){
           
    $("#id_producto option:selected").each(function(){
        var id_producto = $(this).val();
        $.post("get_lotes.php",{id_producto:id_producto}, function(data){
            $("#id_lote").html(data);
        }); 
    });
}

$(document).ready(function(){

  var form_detalle = `
    <tr>
        <td>
            <select class="form-control" id="id_producto" name="id_producto[]" onchange="cargaLotes();">
                <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-danger removeItemBtn" id="removeItemBtn">(-)</button></td> 
    </tr> `;

var max = 4; //MAXIMO DE FILAS DINAMICAS POR INSERTAR
var x = 1;

// FUNCION PARA AGREGAR LAS FILAS DINAMICAS
$(".addItemBtn").click(function(e){
    e.preventDefault();
    if(x <= max){
        $("#tablaDetallesCompras").append(form_detalle);      
        x++;
    }     
});

// FUNCION PARA ELIMINAR LAS FILAS DINAMICAS AGREGADAS CON LA FUNCIÓN AGREGADA
$("#tablaDetallesCompras").on('click', '.removeItemBtn', function(e){
    e.preventDefault();
    $(this).closest('tr').remove();
    x--;
});
Eduardo Morales
  • 11
  • 2
  • Your code is incomplete, plz verify: https://imgur.com/a/6J6usFU, plz format the code well so i can help you, check this guide: https://imgur.com/a/xV0P7XT – Lucas Paixão Oct 13 '22 at 00:58
  • Thanks, can you add the code that contains the ID tablaDetallesCompras ? Anyway, I saw that there are two IDs: id_lote (and id_producto too), please check this image, and as an append and not a replace is being used, there are two elements with the same ID – Lucas Paixão Oct 13 '22 at 01:45
  • Plz check: https://imgur.com/a/nEKWaDa (id_lote and id_producto) – Lucas Paixão Oct 13 '22 at 01:46
  • you need to include 'multiple' in select tag to trigger the change event on each select – Zubair Ahmd Oct 13 '22 at 02:25
  • `#id_producto` - IDs *must* be unique. Your 2nd append creates a new element with the same ID and your `cargaLotes()` doesn't use `this` but instead uses `$("#id_producto ...` which will *always* refer to the first one. – freedomn-m Oct 13 '22 at 04:16
  • Use event delegation and `this` to refer to the current element. See [this question](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – freedomn-m Oct 13 '22 at 04:17
  • This is the form https://ibb.co/jfQMYmg I don't understeand the multiple select in tag, and event delegation. – Eduardo Morales Oct 13 '22 at 11:16

1 Answers1

1

Can you please check this code for your solution?. You should be using Change function instead of click function.

<script>
$(".addItemBtn").change(function(e){
  e.preventDefault();
        if(x <= max){
            $("#tablaDetallesCompras").append(form_detalle);      
            x++;
        }     
});
</script>
Gowtham ColorWhistle
  • 11
  • 5