Insertar varios registros desde el mismo formulario con PHP y jQuery

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