Bien muchachos esta nueva entrada es una mejora de la anterior Guardar multiples registros con PHP, en la cual haremos exactamente lo mismo pero usando jQuery para poder crear N alumnos desde un solo formulario.
En el ejemplo anterior solo podíamos crear 3 alumnos ya que nos enconfamos más en el uso de PDO y la arquitectura MVC ahora nos enfocaremos en el lado del cliente.
Esta nueva entrada permite agregar N alumnos desde un solo formulario
Permite retirar los formularios adicionales
Debemos agregar un ID a nuestro DIV que contendra a todos los formularios Ya que a este le vamos a ir agregando más formularios dinamicamente usando jQuery y su propiedad prepend().
<div id="alumnos" class="row"> ... lo que sigue es el resto del código del formulario
Luego de esto, nos toca crear un div para el primer formulario que tenemos. ya que haremos una copia usando jQuery, y le pondremos de id #lo-que-vamos-a-copiar.
<div id="lo-que-vamos-a-copiar">
<div class="col-xs-4">
<div class="well well-sm">
<div class="form-group">
<label>Nombre</label>
<input type="text" name="Nombre[]" class="form-control" placeholder="Ingrese su nombre" data-validacion-tipo="requerido|min:3" />
</div>
<div class="form-group">
<label>Apellido</label>
<input type="text" name="Apellido[]" class="form-control" placeholder="Ingrese su apellido" data-validacion-tipo="requerido|min:10" />
</div>
<div class="form-group">
<label>Correo</label>
<input type="text" name="Correo[]" class="form-control" placeholder="Ingrese su correo electrónico" data-validacion-tipo="requerido|email" />
</div>
<div class="form-group">
<label>Sexo</label>
<select name="Sexo[]" class="form-control">
<option value="1">Masculino</option>
<option value="2">Femenino</option>
</select>
</div>
<div class="form-group">
<label>Fecha de nacimiento</label>
<input readonly type="text" name="FechaNacimiento[]" class="form-control datepicker" placeholder="Ingrese su fecha de nacimiento" data-validacion-tipo="requerido" />
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Foto</label>
<input type="file" name="Foto[]" placeholder="Ingrese una imagen" />
</div>
</div>
</div>
</div>
</div>
</div>
Ni bien se cargue el documento html hacemos una copia rápida con jQuery
var formulario_alumno = $("#lo-que-vamos-a-copiar").html();
De esta manera tenemos copiado el formulario completo usando la propiedad .html();
Luego a nuestro HTML vamos agregar una columna más que contendrá el boton de agregar. Recuerden que los ejemplos los maquetamos usando Bootstrap
<div class="col-xs-4">
<div class="well">
<button class="btn btn-lg btn-block btn-default" type="button">Agregar</button>
</div>
</div>
Ahora le debemos agregar el evento click mediante jQuery para que pueda agregar otro formulario
// El encargado de agregar más formularios
$("#btn-alumno-agregar").click(function(){
// Agregamos el formulario
$("#alumnos").prepend(formulario_alumno);
// Agregamos un boton para retirar el formulario
$("#alumnos .col-xs-4:first .well").append('<button class="btn-danger btn btn-block btn-retirar-alumno" type="button">Retirar</button>');
// Hacemos focus en el primer input del formulario
$("#alumnos .col-xs-4:first .well input:first").focus();
// Volvemos a cargar todo los plugins que teníamos, dentro de esta función esta el del datepicker assets/js/ini.js
Plugins();
});
- Cuando se hace click agregamos a nuestro contenedor de los formularios #alumnos la copia que hicimos en la variable formulario_alumno.
- Luego de eso le decimos que agregue al nuevo formulario un botón adicional, este lo usaremos para remover el nuevo formulario en caso que ya no queramos usarlo.
- Luego le decimos que se se posicione en el primer input encontrado del nuevo formulario, de esta manera el usuario ni bien haga click ya puede comenzar a rellenar los datos.
- Y por último volvemos a recargar los plugins que tengamos, en mi caso dentro de esa función tengo el seteo para el datepicker de jQueryUI
Para finalizar, debemos crearle un evento al botón de retirar/eliminar Y esto lo hacemos usando la propiedad on(), ya que el botón ha sido agregado después de haber sido cargado el documento HTML.
// Cuando hacemos click en el boton de retirar
$("#alumnos").on('click', '.btn-retirar-alumno', function(){
$(this).closest('.col-xs-4').remove();
})