Saludos amigos.
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 funcional en php:
Código HTML:
<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:
Código:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(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;
});
$("#form").submit(function(e){
e.preventDefault();
var datos = $('#form').serialize();
$.ajax({
type: "POST",
url: "num_cu4.php",
data: datos,
dataType: "json",
success: function(data){
$('#resp').html(data);
}
})
});
});
</script>
Código HTML:
<table align='center'><tr><td align=center><div><button id='adicional' name='adicional' type='button'>Fila +</button></div></td></tr></table>"
<form id='form'>
<table align=center class='normal' id='tabla'><thead>
<tr bgcolor=\"$color\">
<th>Idioma</th>
<th>Horario</th>
<th>Grupos</th>
<th>Opciones</th>
</tr>
</thead><tbody><tr bgcolor=\"$color\"><td align=center>
<select class="idi" name="idi []">
<option value="0">Seleccionar</option>
<option value="1">ingles</option>
<option value="2">frances</option>
</select>
<td align=center>
<select class="hori campo" id="hori" name="hori[]"></select>
</td><td align=center><input name='grupos[]' type='text' id='grupos[]' maxlength='2' /></td>
<td class="eliminar" align=center><input type="button" value="-"/></td>
</tr>";
</tbody></table><br>
<button type='submit' name='submit' id='ok'>Aceptar</button>
</center>
<table align='center'><tr><td align=center><div><input name='count' id='count' type='hidden'/></div></td></tr></table></form>
}
<div id="resp"></div> 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 uno de los datos que se creen e insertarlos en la bd. 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.