Estoy trabajando en un formulario, que clona las filas de una tabla, filas que contienen unos select y una caja de texto, utilizando para ello javascript y la librería jquery.
La duda a resolver es cómo envío la cantidad de selects adicionanos, no se si me haga explicar, pero para aclararlo, espero sirva, pongo este ejemplo que en php funciona en un select:
<select name='calificacion**$i**'>
<option value="0">Seleccionar</option>
<option value="1">ingles</option>
<option value="2">frances</option>
</select>
Dónde $i sería el número de selects que se van creando; pero no logro acoplar esa referencia ($i) en mi script.
Dejo el código de lo que hasta el momento tengo en funcionamiento:
$(document).ready(function(){
$(".idi").change(function(){
var tr = $(this).parent().parent();
idi = $(this).val();
$.post("getHorarios.php", { idi: idi },
function(data){
tr.find("#hori").html(data);
});
})
$("#adicional").on('click', function(){
var row = $("#tabla tbody tr:eq(0)").clone(true).removeClass('fila-fija');
row.find('.hori').empty();
row.appendTo("#tabla tbody")
var count = $("#tabla tbody tr").length;
$("#count").val(count);
});
$(".eliminar").on("click",function(){
var parent = $(this).closest("tr").remove();
var count = $("#tabla tbody tr").length;
$("#count").val(count)-1;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='form1' name='form1' method='post' action='proceso.php'>
<table align="center" id="tabla">
<thead>
<tr>
<th>Idiomas</th>
<th>Horarios</th>
<th>Grupos</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="idi" name="idi">
<option value="NULL">Seleccionar</option>
<option value="1">ingles</option>
<option value="2">frances</option>
</select>
</td>
<td><select name="hori" class="term" id="hori"></select></td>
<td><input name='grupos$i' type='text' id='grupos' size='3' maxlength='2'/></td>
<td class="eliminar"><input type="button" value="-"/></td>
</tr>
</tbody>
</table>
<table align='center'><tr><td align=center><div><button id='adicional' name='adicional' type='button'>Fila +</button></div></td></tr></table>
<button type='submit' name='submit' id='ok'>Aceptar</button>
</form>
Cómo se puede observar, a medida que se da clic en el botón "fila +", se crea una nueva fila con los select dinámicos y una caja de texto, y necesito enviar cada dato uno de los datos que se diligencien. Sé que debe ser algo básico, pero no logro apreciar qué es, por eso acudo a ustedes por ayuda.
Muchas gracias por los aportes que puedan brindarme.