Share
Anteriormente en Nettuts +, Philo mostró cómo puedes usar jQuery para agregar la validación de formularios a los comentarios de wordpress que funcionan sin ninguna recarga de página. Otra gran manera de utilizar jQuery para mejorar la experiencia del usuario es no solo validar, sino enviar su formulario por completo sin una actualización de página..
En este tutorial, le mostraré lo fácil que es hacerlo: 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). Empecemos.
Si desea una solución ya hecha, pruebe el Formulario de contacto Ultimate PHP, HTML5 y AJAX, o navegue por los otros scripts de formularios que están a la venta en Envato Market..
Formularios de comandos y complementos para la venta en Envato Market 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, usando las funciones nativas de jQuery (significado nativo, no es necesario descargar ningún complemento adicional para que funcione).
Si ha encontrado este artículo sin familiaridad previa con jQuery, un buen lugar para comenzar sería el artículo de Jeffrey Way sobre 15 recursos para que comience con jQuery From Scratch.
Echemos un vistazo a nuestro código 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 contenedor más adelante. Tú
También podría 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 necesito ninguno de estos aquí, porque jQuery se encarga de todo esto más adelante.
Otra cosa importante que debe asegurarse de incluir es los valores de identificación para cada campo de entrada. Los valores de id
son lo que su script de jQuery buscará para procesar el formulario.
He añadido algunos estilos css y una imagen de fondo en Photoshop para producir el siguiente formulario:
El siguiente paso en el proceso es agregar algo de código jQuery. Asumiré que has descargado jQuery, que has subido a tu servidor y que estás haciendo referencia a él en tu página web..
A continuación, abra otro archivo javascript nuevo, consúltelo en su html como lo haría con cualquier archivo javascript normal.,
y añade lo siguiente:
Accentsconagua
$ (function () $ (". button"). haga clic en (function () // validar y procesar el formulario aquí);); Lo que hace la primera función () es que carga los eventos en el interior, 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. Así que 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 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 clara de nuestra presentación de nuestros scripts.
$ (función () $ ('. error'). hide (); $ (". button"). haga clic en (función () // validar y procesar el formulario aquí $ ('. error'). hide () ; nombre var = $ ("input # name"). val (); if (name == "") $ ("label # name_error"). show (); $ ("input # name"). focus ( ); devolver falso; var email = $ ("input # email"). val (); if (email == "") $ ("label # email_error"). show (); $ ("input # email ") .focus (); return false; var phone = $ (" input # phone "). val (); if (phone ==" ") $ (" label # phone_error "). show (); $ ("input # phone"). focus (); return false;);); 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 agrega 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 primero, 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 primero verificando si el campo de nombre fue dejado en blanco por el usuario, y si lo está, entonces mostramos la etiqueta con el id de name_error. Luego colocamos el foco en el campo de entrada de nombre, en caso de que el usuario
está en absoluto confundido acerca de 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:
nombre var = $ ("entrada # nombre"). val (); 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 "nombre_error":
if (name == "") $ ("label # name_error"). show (); A continuación, volvemos a colocar el foco de formulario en el campo de entrada con el ID de "nombre", y finalmente devolvemos falso:
if (name == "") $ ("label # name_error"). show (); $ ("entrada # nombre"). focus (); falso retorno; Asegúrese de devolver el código falso en su código; de lo contrario, se enviará todo el formulario (que
El propósito de este tutorial)! Lo que devuelve false es que impide que el usuario continúe.
sin rellenar los campos requeridos.
Ahora llegamos al corazón del tutorial: enviar nuestro formulario sin actualizar la página, lo que envía los valores del formulario a un script php en segundo plano. Echemos un vistazo a todo el código primero, luego voy a desglosar en más detalles a continuación. 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):
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; // alert (dataString); devolver falso; $ .ajax (type: "POST", url: "bin / process.php", data: dataString, success: function () $ ('# contact_form'). html (""); $ ('# message'). html ("Formulario de contacto enviado!
") .adjuntar("Nos veremos pronto.
") .hide () .fadeIn (1500, function () $ ('# message'). append ("
"); ); ); falso retorno; ¡Tenemos mucho que hacer aquí! Vamos a desglosarlo todo: es tan simple y tan fácil de usar una vez que comprendes el proceso. Primero creamos una cadena de valores, que son todos los valores de formulario que queremos transmitir al script que envía el correo electrónico..
Recordar previamente, habíamos establecido una variable 'nombre' con el valor del campo de entrada con id "nombre", de esta manera:
"); ); ); falso retorno; nombre var = $ ("entrada # nombre"). val (); Podemos usar ese valor de 'nombre' nuevamente, así como los valores de 'correo electrónico' y 'teléfono', para crear nuestra cadena de datos:
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone;
He comentado una alerta que a veces utilizo para asegurarme de que estoy tomando los valores correctos, lo que puede ser útil en el proceso. Si elimina el comentario de esa alerta y prueba su formulario, suponiendo que todo ha ido bien hasta ahora, debería recibir un mensaje similar al siguiente:
Ahora llegamos a nuestra función principal de ajax, la estrella del show de hoy. Aquí es donde ocurre toda la acción, así que paga.
mucha atención!
$ .ajax (type: "POST", url: "bin / process.php", data: dataString, success: function () // mostrar el mensaje al usuario aquí); falso retorno;
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ó correctamente, podemos mostrar un mensaje al usuario y, finalmente, devolver falso para que la página no se vuelva a cargar. ¡Eso es! Todo el proceso se maneja allí 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, podría enviar sus valores a una base de datos, procesarlos y luego mostrar los resultados al usuario. Entonces, si publicaste una encuesta a los usuarios, podrías 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:
nombre var = $ ("entrada # nombre"). val (); var email = $ ("input # email"). val (); var phone = $ ("input # phone"). val (); var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; Luego usamos la función ajax de jQuery para procesar los valores en la cadena de datos. Después de esto
el proceso finaliza correctamente, mostramos un mensaje al usuario y agregamos return false para que nuestra página no se actualice:
$ .ajax (type: "POST", url: "bin / process.php", data: dataString, success: function () $ ('# contact_form'). html (""); $ ('# message'). html ("Formulario de contacto enviado!
") .adjuntar("Nos veremos pronto.
") .hide () .fadeIn (1500, function () $ ('# message'). append (""); ); ); falso retorno; La parte de éxito de la secuencia de comandos se ha completado con algún contenido específico que se puede mostrar al usuario. Pero en lo que respecta a nuestra funcionalidad ajax, eso es todo lo que hay que hacer. 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 se puede ver..
Veamos brevemente la parte del código que muestra nuestro mensaje al usuario para finalizar el tutorial..
Primero, cambiamos todo el contenido de la div de contact_form (recuerde que dije que estaríamos necesitando esa div) con la siguiente línea:
$ ('# contact_form'). html (""); Lo que se ha hecho es reemplazar todo el contenido dentro de la división contact_form, usando la función html () de jQuery's. Así que en lugar de un formulario, ahora solo tenemos un nuevo div en el interior, con id de 'mensaje'. A continuación, llenamos esa división con un mensaje real, un h2 que dice "Formulario de contacto enviado":
$ ('# mensaje'). html ("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 completar todo, agregamos un efecto genial al ocultar el mensaje div con la función hide () de jQuery, luego lo desvanecemos con fadeIn () función:
.adjuntar("Nos veremos pronto.
") .hide () .fadeIn (1500, function () $ ('# message'). append ("");); Entonces el usuario termina viendo lo siguiente después de enviar el formulario:
A estas alturas, creo que tendrá que aceptar que es increíblemente fácil enviar formularios sin actualizar la página con la potente función ajax de jQuery. Simplemente obtenga los valores en su archivo javascript, procételos con la función ajax y devuelva falso, y estará listo para comenzar. 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 silenciosamente en segundo plano.
Entonces, 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 los valores a través de una base de datos y recuperan los 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.
Me gustaría agregar algunas palabras finales sobre el ejemplo de demostración proporcionado. En la demostración, puede observar que en realidad se está utilizando un complemento: el archivo runonload.js. Indiqué al principio del tutorial que no usaríamos ningún complemento, y luego, en la demostración, hay un script de ejecución adicional para la descarga, ¡por lo que puede ser necesaria una 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 procesar el formulario. Para que pueda 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 de preparación de documentos nativa de jQuery, y descubrí que ese es el caso al armar este tutorial. Por alguna razón, la función focus () no funcionaría en la carga de la página utilizando la función preparada para el documento nativo de jQuery, pero sí funcionó con runonload, y es por eso que la encuentra como parte del ejemplo. Por lo tanto, si conoce una forma de lograrlo sin usar runonload, me encantaría saberlo..
Hemos creado una guía completa para ayudarlo a aprender JavaScript, ya sea que esté comenzando a trabajar como desarrollador web o si desea explorar temas más avanzados..
