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

Código de fuente