En el post anterior Ventana de Diálogo con HTML – jQuery – jQuery UI + Formulario + jQuery.Validate creamos una ventana de diálogo con un formulario además de validarlo con jQuery Validate, en esta entrega agregaremos un par de funcionalidades de la mano de la función .ajax(); agregaremos un pre-loader, este lo vimos en Ventana de Diálogo jQuery + jQuery UI + AJAXUsando jQuery.ajax (Ventana de Diálogo + Pre-Loader) y haremos que al momento de iniciar el envío del formulario se oculte el botón Continuar.

El suao de Ventanas Modales

Vista de jQuery Modal

Descargar código completo desde github

Video Tutorial

Modificando el formulario

Lo primero que haremos es insertar el contenedor con un id=”respuestaAKAX” donde al momento de procesar el formulario se mostrará el pre-loader y una vez terminado se presentará el resultado de este.

Así quedaría la Ventana de Diálogo con HTML – jQuery – jQuery UI + Formulario + jQuery.Validate  con el contenedor

Archivo PHP para procesar con AJAX

Crearemos un script php al que llamaremos por medio de la función .ajax()

Archivo ajaxFormPhp.php

Modificando el código javascript

En el código que generamos en la Ventana de Diálogo con HTML – jQuery – jQuery UI + Formulario + jQuery.Validate agregaremos la función .ajax() que muestro a continuación

Código javascript completo:

Código Completo