0

Sigo con el proyecto que estoy realizando y me está ayudando a avanzar en mi conocimiento en JS. Mi problema es que no consigo leer los valores de las filas que añado de forma dinámica a una tabla a excepción de la primera. He probado bastantes opciones pero no lo consigo y ando un poco frustrado. Ahora estoy buscando la forma de que cuando se genere una fila nueva, asignar un id de forma dinámica y luego recorrer esos id para obtener su valor.

Esta es la tabla(HTML) donde está la tabla fija y la parte dinámica:

<table>
    <thead>
        <tr>
            <th class="col-md-3">Nombre</th>
            <th class="col-md-2">Precio</th>
            <th class="col-md-2">Especialidad</th>
            <th class="col-md-2">Cuerpo</th>
            <th class="col-md-3">Rango</th>
        </tr>
    </thead>
    <tbody id="mytable">
        <tr>
            <td class="col-md-3">
                <select class="form-control" name="nombreProductoContratoModal[]" id="nombreProductoContratoModal" required="required" />
                    <?php
                    for ($i = 0; $i < count($productos); $i++) {
                    ?>
                        <option value="<?php echo $productos[$i]->getidProducto(); ?>"><?php echo $productos[$i]->getnombre(); ?></option>
                    <?php
                    }
                    ?>
                </select>
            </td>
             <td class="col-md-2">
                <input type="number" name="precioProductoContratoModal[]" id="precioProductoContratoModal" class="form-control" required="required" />
            </td>
             <td class="col-md-2">
                <select class="form-control" name="especialidadProductoContratoModal[]" id="especialidadProductoContratoModal" required="required" />
                    <?php
                    for ($i = 0; $i < count($especialidades); $i++) {
                    ?>
                        <option value="<?php echo $especialidades[$i]['idEspecialidad']; ?>"><?php echo $especialidades[$i]['nombre']; ?></option>
                    <?php
                    }
                    ?>
                </select>
            </td>
             <td class="col-md-2">
                <select class="form-control" name="cuerpoProductoContratoModal[]" id="cuerpoProductoContratoModal" required="required" />
                    <?php
                    for ($i = 0; $i < count($cuerpos); $i++) {
                    ?>
                        <option value="<?php echo $cuerpos[$i]['idCuerpo']; ?>"><?php echo $cuerpos[$i]['nombre']; ?></option>
                    <?php
                    }
                    ?>
                </select>
            </td>
            <td class="col-md-3">
                <select class="form-control" name="rangoProductoContratoModal[]" id="rangoProductoContratoModal" required="required" />
                    <?php
                    for ($i = 0; $i < count($rangos); $i++) {
                    ?>
                        <option value="<?php echo $rangos[$i]['idRangos']; ?>"><?php echo $rangos[$i]['nombre']; ?></option>
                    <?php
                    }
                    ?>
                </select>
            </td> 
        </tr>
    </tbody>
</table>
<button type="submit" class="btn btn-success" id="masfilas">+</button>

este sería la parte de JS que genera las filas de forma dinámica cada vez que se pulsa el anterior botón con id = masfilas

    $("#masfilas").click(function(){
          $("#mytable").append('<tr><td class="col-md-3"><select class="form-control" name="nombreProductoContratoModal" id="nombreProductoContratoModal" required="required"><?php for ($i = 0; $i < count($productos); $i++) { ?> <option value="<?php echo $productos[$i]->getidProducto(); ?>"><?php echo $productos[$i]->getnombre(); ?></option><?php } ?></select></td><td class="col-md-2"><input type="number" name="precioProductoContratoModal" id="precioProductoContratoModal" class="form-control" required /></td><td class="col-md-2"><select class="form-control" name="especialidadProductoContratoModal" id="especialidadProductoContratoModal" required="required"><?php for ($i = 0; $i < count($especialidades); $i++) { ?><option value="<?php echo $especialidades[$i]['idEspecialidad']; ?>"><?php echo $especialidades[$i]['nombre']; ?></option><?php } ?></select></td><td class="col-md-2"><select class="form-control" name="cuerpoProductoContratoModal" id="cuerpoProductoContratoModal"><?php for ($i = 0; $i < count($cuerpos); $i++) { ?><option value="<?php echo $cuerpos[$i]['idCuerpo']; ?>"><?php echo $cuerpos[$i]['nombre']; ?></option><?php } ?></select></td><td class="col-md-3"><select class="form-control" name="cuerpoProductoContratoModal" id="cuerpoProductoContratoModal"><?php for ($i = 0; $i < count($rangos); $i++) { ?><option value="<?php echo $rangos[$i]['idRango']; ?>"><?php echo $rangos[$i]['nombre']; ?></option><?php } ?></select></td></tr>');
});

y por último la función JS que gestiona los datos cuando se pulsa el botón de "envíar" a todo el "formulario" del inicio y los pasa mediante Ajax al PHP. Como decía al principio, cuando lanzo la ejecución solo me lee la primera fila, el resto directamente no me da ningún dato. Lógicamente los bucles for que se ven son solo para probar/ver los datos que obtengo con las pruebas

$("#btnAltaContrato").click(function () {
    var table = document.getElementById('mytable');
    var inputCheck = table.querySelector('[id="nombreProductoContratoModal"]');
    let values_pro = [].slice.call(inputCheck);
    let long = inputCheck.length;

    let nombre_contrato = $("#addnombreContrato").val();
    let destino_contrato = $("#addDestinoContrato").val();
    let fec_ini_contrato = $("#addFechaInicioContrato").val();
    let fec_fin_contrato = $("#addFechaFinContrato").val();
    let agentes_asoc_contrato = $("#agentes_asociados_contrato").val();
    let gestor_contrato = $("#addGestorContrato").val();
    let id_producto_contrato = $("#nombreProductoContratoModal").val();
    let precio_producto_contrato = $("#precioProductoContratoModal").val();
    let especialidad_producto_contrato = $("#especialidadProductoContratoModal").val();
    let cuerpo_producto_contrato = $("#cuerpoProductoContratoModal").val();
    let rango_producto_contrato = $("#rangoProductoContratoModal").val();


    for (i=0;i<agentes_asoc_contrato.length;i++){
        alert("Agentes: "+agentes_asoc_contrato[i]);
        console.log("Por consola: "+agentes_asoc_contrato[i]);
    }
    for (i=0;i<long;i++){
        values_produ = inputCheck[i].textContent;
        alert("Productos: "+values_produ);
        console.log("Por consolas: "+values_produ);
    }

    for (i=0;i<long;i++){
        values_pre = precio_producto_contrato[i];
        alert("Precio: "+values_pre);
        console.log("Por consola: "+values_pre);
    }

    for (i=0;i<long;i++){
        values_esp = especialidad_producto_contrato[i];
        alert("Espec: "+values_esp);
        console.log("Por consola: "+values_esp);
    }

    for (i=0;i<long;i++){
        alert("Cuerpo: "+cuerpo_producto_contrato[i]);
        console.log("Por consola: "+cuerpo_producto_contrato[i]);
    }

    for (i=0;i<long;i++){
        alert("Rango: "+rango_producto_contrato[i]);
        console.log("Por consola: "+rango_producto_contrato[i]);
    }

    parametros = {
        'long': long,
        'nombre_contrato': nombre_contrato,
        'destino_contrato': destino_contrato,
        'fec_ini_contrato': fec_ini_contrato,
        'fec_fin_contrato': fec_fin_contrato,
        'agentes_asoc_contrato': agentes_asoc_contrato,
        'gestor_contrato': gestor_contrato,
        'id_producto_contrato': id_producto_contrato,
        'precio_producto_contrato': precio_producto_contrato,
        'especialidad_producto_contrato': especialidad_producto_contrato,
        'cuerpo_producto_contrato': cuerpo_producto_contrato,
        'rango_producto_contrato': rango_producto_contrato
    }

    $.ajax({
        type: "POST",
        url: "ajax/addContrato.php",
        data: parametros,
        success: function(datos){
            setTimeout(function(){
                    window.location.replace("contratos.php");
                },1500
            );
        }
    });
});

1 respuesta 1

0

Finalmente me resultó mas fácil generar los id's de forma dinámica con un contador concatenado con el "nombre" del id, quedando el código de la siguiente manera:

HTML

<div class="row">    
    <div class="form-group col-md-12 input-modal negrita">
        <label>Productos Asociados</label>
        <table>
            <thead>
                <tr>
                    <th class="col-md-3">Nombre</th>
                    <th class="col-md-2">Precio</th>
                    <th class="col-md-2">Especialidad</th>
                    <th class="col-md-2">Cuerpo</th>
                    <th class="col-md-3">Rango</th>
                </tr>
            </thead>
            <tbody id="mytable">
            </tbody>
        </table>
        <button type="submit" class="btn btn-success" id="masfilas">+</button>
    </div>
</div>
<div class="modal-footer d-flex justify-content-around">
    <a href="contratos.php" type="button" class="btn btn-secondary" value="Cancelar">Cancelar</a>
    <input id="btnAltaContrato" type="submit" class="btn btn-success" value="Alta Contrato">
</div>

El JS que genera cada fila de forma dinámica con el id:

    let conta = 0;
    $("#masfilas").click(function(){

        $("#mytable").append('<tr><td class="col-md-3"><select class="form-control" name="nombreProductoContratoModal" id="nombreProductoContratoModal'+conta+'" required="required"><?php for ($i = 0; $i < count($productos); $i++) { ?> <option value="<?php echo $productos[$i]->getidProducto(); ?>"><?php echo $productos[$i]->getnombre(); ?></option><?php } ?></select></td><td class="col-md-2"><input type="number" name="precioProductoContratoModal" id="precioProductoContratoModal'+conta+'" class="form-control" required /></td><td class="col-md-2"><select class="form-control" name="especialidadProductoContratoModal" id="especialidadProductoContratoModal'+conta+'" required="required"><?php for ($i = 0; $i < count($especialidades); $i++) { ?><option value="<?php echo $especialidades[$i]['idEspecialidad']; ?>"><?php echo $especialidades[$i]['nombre']; ?></option><?php } ?></select></td><td class="col-md-2"><select class="form-control" name="cuerpoProductoContratoModal" id="cuerpoProductoContratoModal'+conta+'"><?php for ($i = 0; $i < count($cuerpos); $i++) { ?><option value="<?php echo $cuerpos[$i]['idCuerpo']; ?>"><?php echo $cuerpos[$i]['nombre']; ?></option><?php } ?></select></td><td class="col-md-3"><select class="form-control" name="rangoProductoContratoModal" id="rangoProductoContratoModal'+conta+'"><?php for ($i = 0; $i < count($rangos); $i++) { ?><option value="<?php echo $rangos[$i]['idRango']; ?>"><?php echo $rangos[$i]['nombre']; ?></option><?php } ?></select></td></tr>');

        conta++;
    });

El JS donde leo los valores de esa tabla y posteriormente con un Ajax lo mando al PHP que hace el insert en la BBDD:

$("#btnAltaContrato").click(function () {

    var table = document.getElementById('mytable');

    let nombre_contrato = $("#addnombreContrato").val();
    let destino_contrato = $("#addDestinoContrato").val();
    let fec_ini_contrato = $("#addFechaInicioContrato").val();
    let fec_fin_contrato = $("#addFechaFinContrato").val();
    let agentes_asoc_contrato = $("#agentes_asociados_contrato").val();
    let gestor_contrato = $("#addGestorContrato").val();

    let alta_productos_contrato = [];
    let alta_precio_contrato = [];
    let alta_especialidad_contrato = [];
    let alta_cuerpo_contrato = [];
    let alta_rango_contrato = [];

    for (var j = 0, row; row = table.rows[j]; j++) {

        let var_alta1 = $('#nombreProductoContratoModal'+j).val();
        alta_productos_contrato.push(var_alta1);
        let var_alta2 = $('#precioProductoContratoModal'+j).val();
        alta_precio_contrato.push(var_alta2);
        let var_alta3 = $('#especialidadProductoContratoModal'+j).val();
        alta_especialidad_contrato.push(var_alta3);
        let var_alta4 = $('#cuerpoProductoContratoModal'+j).val();
        alta_cuerpo_contrato.push(var_alta4);
        let var_alta5 = $('#rangoProductoContratoModal'+j).val();
        alta_rango_contrato.push(var_alta5);
    }

    parametros = {
        'nombre_contrato': nombre_contrato,
        'destino_contrato': destino_contrato,
        'fec_ini_contrato': fec_ini_contrato,
        'fec_fin_contrato': fec_fin_contrato,
        'agentes_asoc_contrato': agentes_asoc_contrato,
        'gestor_contrato': gestor_contrato,
        'alta_productos_contrato': alta_productos_contrato,
        'alta_precio_contrato': alta_precio_contrato,
        'alta_especialidad_contrato': alta_especialidad_contrato,
        'alta_cuerpo_contrato': alta_cuerpo_contrato,
        'alta_rango_contrato': alta_rango_contrato
    }

    $.ajax({
        type: "POST",
        url: "ajax/addContrato.php",
        data: parametros,
        success: function(datos){
            $("#mostraraddcontrato").show();
            $("#mostraraddcontrato").html(datos);
            setTimeout(function(){
                    window.location.replace("contratos.php");
                },1500
            );
        }
    });
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.