Advertisement
  1. Code
  2. Web Development

Enviar un Formulario Sin Actualización de Página usando jQuery

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Anteriormente en Nettuts +, Philo mostró cómo puede usar jQuery para agregar validación de formulario a los comentarios de WordPress que funciona sin ninguna recarga de página. Otra excelente forma de utilizar jQuery para mejorar la experiencia del usuario es no solo validar, sino enviar su formulario completamente sin una actualización de la página.

En este tutorial, le mostraré lo fácil que es hacer eso: envíe un formulario de contacto que envíe un correo electrónico, sin actualizar la página con jQuery. (El correo electrónico real se envía con un script php que se procesa en segundo plano). Comencemos.


Lo que estamos construyendo

En este ejemplo, tenemos un formulario de contacto simple con nombre, correo electrónico y número de teléfono. El formulario envía todos los campos a un script php sin actualizar la página, utilizando funciones nativas de jQuery (significado nativo, no necesita descargar ningún complemento adicional para que funcione.

Si ha encontrado este artículo sin ninguna familiaridad previa con jQuery, un excelente lugar para comenzar sería el artículo de Jeffrey Way sobre 15 Recursos para comenzar con jQuery desde cero.


Paso 1 - Construye el formulario HTML

Echemos un vistazo a nuestro marcado html. Comenzamos con nuestro formulario html básico:

Puede notar que he incluido un div con id contact_form que envuelve todo el formulario.
Asegúrese de no perder ese div en su propia forma, ya que necesitaremos este div de envoltura más adelante. Tú
también podrías notar que he dejado en blanco tanto la acción como las partes del método de la etiqueta del formulario. Nosotros
en realidad no necesitamos ninguno de estos aquí, porque jQuery se encarga de todo más adelante.

Otra cosa importante para asegurarse de incluir son los valores de identificación para cada campo de entrada. Los valores de id
es lo que su script jQuery buscará para procesar el formulario.

Agregué algunos estilos CSS y una imagen de fondo en Photoshop para producir el siguiente formulario:


Paso 2 - Comienza a agregar jQuery

El siguiente paso en el proceso es agregar un código jQuery. Asumiré que ha descargado jQuery, lo ha cargado en su servidor y lo está haciendo referencia en su página web.

A continuación, abra otro nuevo archivo javascript, haga referencia a él en su html como lo haría con cualquier archivo javascript normal,
y agregue lo siguiente:

Lo que hace la primera función() es cargar los eventos dentro, tan pronto como el documento html esté listo. Si ha realizado algún trabajo en jQuery anteriormente, la función es la misma que la función document.ready de jQuery. Entonces comenzamos con eso, y dentro tenemos nuestra función de clic que se ejecuta al hacer clic en el botón Enviar con el nombre de la clase de "botón". En última instancia, lo que hemos logrado con estas líneas de código es lo mismo que si tuviéramos que agregar un evento onclick al botón de envío en el html. La razón por la que lo hacemos con jQuery es para una separación limpia de nuestra presentación de nuestros scripts.


Paso 3: Escriba Alguna Validación de Formulario

Dentro de nuestra función que se carga cuando la página está lista, agregamos alguna validación de formulario. Pero lo primero que ve que se agregó es $('.Error').Hide();. Lo que esto hace es ocultar nuestras 3 etiquetas con el nombre de clase "error". Queremos que estas etiquetas se oculten no solo cuando
la página se carga por primera vez, pero también cuando hace clic en enviar, en caso de que uno de los mensajes se haya mostrado al usuario anteriormente. Cada mensaje de error solo debería aparecer si la validación no funciona.

Validamos comprobando primero si el campo de nombre fue dejado en blanco por el usuario, y si es así, mostramos la etiqueta con la identificación de name_error. Luego colocamos el foco en el campo de entrada de nombre, en caso de que el usuario
está confundido sobre qué hacer a continuación! (He aprendido a nunca asumir demasiado cuando se trata de formar usuarios).

Para explicar con más detalle cómo estamos haciendo que esto suceda, establecemos una variable 'nombre' al valor del campo de entrada con id "nombre", todo con una línea de jQuery:

Luego verificamos si ese valor está en blanco, y si lo está, usamos el método show() de jQuery para mostrar la etiqueta con
id "name_error":

A continuación, volvemos a colocar el foco del formulario en el campo de entrada con la identificación de "nombre" y finalmente devolvemos falso:

Asegúrese de tener una devolución falsa en su código, de lo contrario, se enviará todo el formulario (lo que anula
el propósito de este tutorial)! Lo que devuelve falso es que evita que el usuario continúe
sin completar los campos requeridos.


Paso 4 - Procese su Envío de Formulario con la Función jQuery AJAX

Ahora llegamos al corazón del tutorial: enviar nuestro formulario sin actualizar la página, que envía los valores del formulario a un php, un script en segundo plano. Echemos un vistazo a todo el código primero, luego lo desglosaré con más detalle. Agregue el siguiente código justo debajo del fragmento de validación que agregamos anteriormente (y antes de que se cierre la función de clic del botón):

Tenemos mucho que hacer aquí! Analicemos todo: es muy simple y fácil de usar una vez que comprende el proceso. Primero creamos una cadena de valores, que son todos los valores de formulario que queremos pasar al script que envía el correo electrónico.

Recordemos previamente, habíamos establecido una variable 'nombre' con el valor del campo de entrada con la identificación "nombre", así:

Podemos usar ese valor de 'nombre' nuevamente, así como los valores de 'correo electrónico' y 'teléfono', para crear nuestra cadena de datos:

He comentado una alerta que a veces uso para asegurarme de que estoy tomando los valores correctos, lo que puede ser útil en el proceso. Si descomenta esa alerta y prueba su formulario, suponiendo que todo haya ido bien hasta ahora, debería recibir un mensaje similar al siguiente:

Ahora llegamos a nuestra función principal de ajax, la estrella del programa de hoy. Aquí es donde sucede toda la acción, así que preste
¡mucha atención!

Básicamente, lo que sucede en el código es esto: la función .ajax() procesa los valores de nuestra cadena llamada dataString (data:dataString) con un script php llamado process.php(url:"bin/process.php"), usando el método 'POST' (tipo:"POST"). Si nuestro script se procesó con éxito, podemos mostrar un mensaje al usuario y finalmente devolver falso para que la página no se vuelva a cargar. ¡Eso es todo! ¡Todo el proceso se maneja allí mismo en estas pocas líneas!

Hay cosas más avanzadas que puede hacer aquí, además de enviar un correo electrónico y dar un mensaje de éxito. Por ejemplo, puede enviar sus valores a una base de datos, procesarlos y luego mostrar los resultados al usuario. Entonces, si publicó una encuesta para los usuarios, podría procesar su voto y luego devolver los resultados de la votación, todo sin necesidad de actualizar la página.

Resumamos lo que sucedió en nuestro ejemplo, para asegurarnos de que hemos cubierto todo. Tomamos nuestros valores de formulario con jQuery, y luego los colocamos en una cadena como esta:

Luego usamos la función ajax de jQuery para procesar los valores en dataString. Después de eso
el proceso finaliza con éxito, mostramos un mensaje al usuario y agregamos return false para que nuestra página no se actualice:

La parte de éxito de la secuencia de comandos se ha completado con un contenido específico que se puede mostrar al usuario. Pero en lo que respecta a nuestra funcionalidad ajax, eso es todo. Para obtener más opciones y configuraciones, asegúrese de consultar la documentación de jQuery sobre la función ajax. El ejemplo aquí es una de las implementaciones más simples, pero aun así, es muy poderoso como puede ver.


Paso 5: Mostrar un Mensaje al Usuario

Veamos brevemente la parte del código que muestra nuestro mensaje al usuario para finalizar el tutorial.

Primero, cambiamos todo el contenido del contact_form div (recuerde que dije que necesitaríamos ese div) con la siguiente línea:

Lo que ha hecho es reemplazar todo el contenido dentro de contact_form div, usando la función html() de jQuery. Entonces, en lugar de una forma, ahora tenemos un nuevo div dentro, con la identificación de 'mensaje'. A continuación, llenamos ese div con un mensaje real: un h2 que dice "Formulario de contacto enviado":

A continuación, agregamos aún más contenido al mensaje div con la función append() de jQuery, y para colmo agregamos un efecto genial al ocultar el mensaje div con la función jQuery hide(), luego lo desvanece todo con el fadeIn() función:

Entonces, el usuario termina viendo lo siguiente después de enviar el formulario:

Por ahora, creo que tendrá que aceptar que es increíblemente fácil enviar formularios sin actualizar la página utilizando la potente función ajax de jQuery. Simplemente obtenga los valores en su archivo javascript, proceselos con la función ajax y devuelva false, y estará listo. Puede procesar los valores en su script php como lo haría con cualquier otro archivo php, la única diferencia es que el usuario no tiene que esperar a que se actualice la página; todo sucede en silencio en segundo plano.

Por lo tanto, si tiene un formulario de contacto en su sitio web, un formulario de inicio de sesión o incluso formularios más avanzados que procesan valores a través de una base de datos y recuperan resultados, puede hacerlo todo de manera fácil y eficiente, y quizás lo más importante, puede mejorar el usuario final experiencia con su sitio web al proporcionar interactividad sin que tengan que esperar a que la página se vuelva a cargar.

Conclusión

Me gustaría agregar algunas palabras finales sobre el ejemplo de demostración proporcionado. En la demostración, puede observar que, de hecho, se está utilizando un complemento: el archivo runonload.js. Indiqué al comienzo del tutorial que no estaríamos usando ningún complemento, y luego encontrará en la demostración que hay un script adicional de runonload, ¡por lo que puede ser necesaria alguna explicación! Para cualquier persona interesada en ver una demostración en vivo, puede ver el formulario de consultoría SEO de mi sitio web.

El único uso que hice con runonload en realidad no tiene nada que ver con el procesamiento del formulario. Por lo tanto, puede realizar las funciones ajax completamente sin ningún complemento adicional. Solo usé runonload para enfocar el campo de entrada de nombre en la carga de la página. Según mi experiencia, llamar a runonload a veces puede ser un mejor reemplazo para la función lista para documentos nativos de jQuery, y descubrí que ese es el caso al elaborar este tutorial. Por alguna razón, la función focus() no funcionaría en la carga de la página utilizando la función de preparación de documentos nativos de jQuery, pero funcionó con runonload, y es por eso que la encuentra como parte del ejemplo. Por lo tanto, si conoce una forma de lograrlo sin utilizar runonload, me encantaría saber de usted.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.