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
);
}
});
});