EntradaJQuery: obtiene el valor de los campos de formulario. JQuery - Obtenga el valor de los campos del formulario Verifique los comentarios del formulario PHP
Procesamiento de formularios
»» Este artículo utiliza. Guarde esta página para probar los ejemplos siguientes.
jQuery proporciona varios métodos para manejar eventos relacionados con formularios. Ahora tiene sentido repasar sus conocimientos en esta área, ya que las formas son el tema de nuestra consideración. Los métodos que nos interesan y los eventos que les corresponden fueron descritos en el artículo "Uso de métodos de eventos directos", luego consideraremos estos eventos con más detalle.
Responder a los cambios en el enfoque de un formulario
Métodos difuminar () y atención () le permiten responder a los cambios en el estado de enfoque de un formulario. Por lo general, esta función se utiliza para ayudar al usuario a navegar qué elemento tiene el foco (y, por lo tanto, qué elemento recibirá la entrada). A continuación se ofrece un ejemplo relevante:
$ (function () ($ ("input"). bind ("focus blur", function (e) (var borderVal = e.type == "focus"? "medium solid green": ""; $ (this) .css ("borde", borderVal);));));
En este ejemplo, seleccionamos todos los elementos de entrada y registramos la función como un controlador para eventos de enfoque y desenfoque. Esta función resalta el elemento con un borde verde cuando recibe el enfoque y elimina el borde cuando se pierde el enfoque:
Tenga en cuenta que aquí se utiliza el selector de entrada. En otras palabras, los elementos se seleccionan por descriptor. En algunos navegadores, este selector funciona de manera más amplia y selecciona específicamente elementos de botón que son capaces de iniciar el envío de un formulario. Esto significa que cuando se usa el selector extendido, el borde se aplicará no solo a los elementos de entrada, sino también al elemento del botón.
Reacción a valores de formulario modificados
Evento cambio disparado cuando el usuario cambia el valor del elemento del formulario. Este evento es especialmente útil si proporciona información agregada basada en los valores ingresados en un formulario. El siguiente ejemplo muestra cómo se puede utilizar este evento en un documento que representa un sitio de floristería para rastrear la cantidad total del pedido:
$ (function () (var total = $ ("# buttonDiv") .prepend ("
Este ejemplo calcula la suma de todos los valores ingresados en los campos de entrada en respuesta al evento de cambio y muestra el resultado en el elemento span que se agregó previamente al documento. Tenga en cuenta que el método val () se utiliza para obtener los valores de los elementos de entrada.
Reaccionar a las presentaciones de formularios
Las operaciones más complejas que se pueden realizar en formularios incluyen anular las acciones predeterminadas del navegador para los elementos del formulario. A continuación se muestra un ejemplo sencillo.
En este capítulo, le mostraré qué tipo de soporte proporciona jQuery para trabajar con formularios HTML. Específicamente, enumeraré los eventos relacionados con el formulario y los métodos jQuery que puede usar para manipularlos; sin embargo, la mayor parte de este capítulo se centra en un complemento que proporciona un mecanismo excelente para validar los valores que el usuario ingresa en un formulario antes de enviarlos al servidor. Si alguna vez ha escrito una aplicación web con formularios, comprende que un usuario puede ingresar cualquier tipo de datos en un formulario, por lo que la validación es un proceso importante.
Comienzo este capítulo presentando el script del lado del servidor de Node.js que usará en esta parte del libro. El guión no servirá de mucho en este capítulo. Solo le mostrará los valores de datos que se han ingresado en el formulario, pero en capítulos posteriores, trabajará más con Node.js. B es un resumen de este capítulo.
Tabla 13-1: Resumen del capítulo
| Tarea | Solución | Listado |
| Instalar el servidor Node.js | Utilice el script proporcionado en este capítulo (e incluido en fuente que acompaña a este libro) | , |
| Reaccionar ante el enfoque ganado o perdido por un elemento | Utilice métodos de enfoque y desenfoque | |
| Responder a los cambios en los valores que el usuario ha introducido en un elemento. | Usar método de cambio | |
| Reaccionar (y / o abortar) el envío del formulario por parte del usuario | Usar método de envío | , |
| Validar valores en el formulario | Utilice un complemento de validación | |
| Configurar el complemento de validación | Pasar un objeto de mapa al método de validación | |
| Definir y aplicar reglas de validación usando la clase. | Utilice los métodos addClassRules y addClass | , , , |
| Aplicar reglas de validación directamente a los elementos | Usar método de reglas | , |
| Aplicar reglas de validación usando nombres de elementos | Agregar propiedad de reglas al objeto de opciones | |
| Aplicar reglas de validación usando atributos de elementos | Definir atributos que correspondan a comprobaciones de validación individuales | |
| Definir mensajes personalizados para reglas aplicadas a través de nombres y atributos de elementos. | Agregue la propiedad de mensaje al conjunto de objetos de opciones para mapear el objeto que define mensajes personalizados | , |
| Definir mensajes personalizados para reglas aplicadas directamente a elementos. | Incluir un objeto de mapa que defina los mensajes como un argumento del método de reglas | |
| Crear un verificador de validación personalizado | Utilice el método addMethod | , |
| Dar formato a los mensajes de validación | Utilice las propiedades highlight, unhighlight, errorElement y errorClass del objeto de opciones |
Un artículo en el que consideraremos diferentes caminos extracción de datos simple de Formularios HTML... Es decir, veremos cómo hacer esto usando cada método, así como también los métodos jQuery diseñados específicamente para esto. No consideraremos el objeto FormData en este artículo.
jQuery - Recuperación de datos de formulario usando cada método
Veamos el trabajo de recuperación de datos de elementos de formulario usando cada método usando un ejemplo.
// crea un objeto vacío var $ data = (); // iterar sobre todas las entradas, áreas de texto y seleccionar elementos del formulario con id = "myForm" $ ("# myForm"). find ("input, textearea, select"). each (function () (// agregar una nueva propiedad del objeto $ datos // nombre de la propiedad - valor del nombre del elemento atributo // valor de la propiedad - valor valor de la propiedad del elemento $ datos = $ (esto) .val ();));
Como mínimo, esta secuencia de acciones consiste en crear un objeto JavaScript vacío, iterar sobre los elementos del formulario usando cada método y agregar elementos correspondientes a los valores de ciertos atributos (nombre y valor) al objeto de datos creado.
Si es necesario, después de recibir los datos del formulario, puede agregar varios controles... Esto evitará que se envíen datos no válidos al servidor.
Para enviar datos al servidor (por ejemplo, usando tecnología AJAX), puede usar el método jQuery ajax.
// Solicitud AJAX que se enviará al servidor: // en la dirección: process.php // por método POST// contiene datos $ datos // éxito es una función que se llamará después de recibir una respuesta del servidor // (la respuesta en sí está disponible a través del argumento de resultado) $ .ajax ((url: "process.php", escriba : "publicar", datos: $ datos, éxito: función (resultado) (// acciones al recibir una respuesta (resultado) del servidor)));
jQuery: serializar un formulario
En jQuery, puede usar los siguientes métodos para obtener todos los campos de formulario de entrada, área de texto y selección:
- serializar ()- diseñado para serializar datos de formularios en una cadena de consulta. FieldName1 = Value1 & FieldName2 = Value2 ...
- serializeArray ()- codifica elementos de formulario en una matriz de nombres y valores. [(nombre: "nombre de campo1", valor: "valor1"), (nombre: "nombre de campo2", valor: "valor2"), ...]
Los métodos jQuery serialize y serializeArray difieren entre sí solo en el formato de salida. El método de serialización se usa generalmente cuando el resultado (datos del formulario) debe colocarse en una cadena Solicitud HTTP... El método serializeArray, por el contrario, se usa cuando el resultado que proporcionó, por regla general, aún debe procesarse.
Por ejemplo, veamos cómo puede iterar sobre la matriz devuelta por el método serializeArray usando la función each:
// crea una matriz de objetos a partir de los datos del formulario var data = $ ("# myForm"). serializeArray (); // iterar sobre cada valor en la matriz e imprimirlo en el formato ElementName = value en la consola $ .each (data, function () (console.log (this.name + "=" + this.value);)) ;
Si recopila datos para pasarlos al método de la biblioteca jQuery ajax, entonces, en este caso, no importa cuál de estos métodos utilizar. Porque este método puede aceptar datos codificados mediante el método serialize o serializeArray.
Para que un artículo se serialice utilizando el método serialize o serializeArray, debe cumplir con los criterios "controles exitosos" especificado en la especificación HTML. Primero condición "controles exitosos" Es la presencia del atributo de nombre en el elemento. Segundo, si el formulario no se envía usando el botón enviar, entonces (el nombre y el valor del botón) no se agregará a la cadena o matriz devuelta por el método. Tercera, valores de elementos casillas de verificación y botones de radio(entrada con tipo "radio" o "casilla de verificación") se incluirán en el conjunto solo si están marcadas (marcadas). Cuatro, los elementos que están deshabilitados no se procesarán. Aquellos. para que un elemento sea serializado, debe tener falso como valor de la propiedad deshabilitada (en otras palabras, el elemento no debe tener ningún atributo deshabilitado).
Nota: Los métodos serialize y serializeArray no serializan datos de los elementos que se utilizan para seleccionar archivos.
Veamos un ejemplo, en el que, según el botón pulsado en el formulario, recopilamos datos mediante el método serialize o serializeArray. Para enviar datos al servidor y recibir una respuesta de este, usaremos la función jQuery ajax. Inserte la respuesta que vendrá del servidor en el elemento con el identificador form_result.
Código PHP que maneja la solicitud ajax en el servidor:
$ valor) (// agrega el nombre y el valor de la clave $ datos. = $ clave. "=". $ valor. "
";) // imprime el resultado echo $ data;?>
El código anterior simplemente genera una cadena a partir de los datos del formulario en el servidor, que luego se enviará al cliente (navegador).
Los formularios son quizás uno de los elementos más desagradables de la página, al configurarlos
apariencia, luego también verifique lo que los usuarios descuidados han ingresado y tráigalos
información sobre los errores cometidos, y al final envías datos al servidor con
una sensación de alivio por el arduo trabajo realizado. Entonces, sobre lo que ayudará en
Contaré este mismo trabajo.
Para empezar, vale la pena recordar los eventos con los que tiene que trabajar más a menudo:
cambiar - cambiar el valor de un elemento
enviar - enviar el formulario
¿En qué casos nos ayudarán? Es simple: el seguimiento de los cambios permite
manejar eventos como cambiar la casilla de selección "a, o el botón de radio" a, que es obligatorio
para remodelar dinámicamente. Y el ejemplo más simple de esto está en la página.
selección de registro de un país, luego se debe cargar una lista para el país seleccionado
regiones, por región: una lista de ciudades, etc. Enviar seguimiento es obligatorio para
comprobar la corrección de la cumplimentación del formulario, así como el envío del formulario por
AJAX. Tomemos una forma más simple:
Y los ejemplos irán en orden inverso, aquí está el envío del formulario AJAX desde el enlace de
action: $ ("formulario"). submit (function () (// Te contaré más sobre AJAX más adelante $ .post ($ (this) .attr ("action"), // enlace donde enviamos los datos $ (this). serialize () // datos del formulario); 64 // deshabilita la acción predeterminada return false;));
Aquí está el primer método, serialize (), es responsable de "recopilar" datos del formulario de una manera conveniente.
formato de transferencia de datos:
name = Ivan & role = Admin
También hay un método serializeArray (): representa los datos recopilados como un objeto: [(nombre: "nombre", valor: "Ivan"), (nombre: "rol", valor: "Admin"),]
Ahora vale la pena agregarlo código dado alguna validación de datos: $ ("formulario"). submit (function () (if ($ (this) .find ("input"). val () == "") (alert ("Enter your username"); return false;) // un fragmento de código con envío // ...));
Aquí hay otro método que a menudo necesitaremos:
val () - obteniendo el valor del primer elemento de formulario de la selección
val (valor): establecer el valor para todos los elementos de formulario de la selección
Este método funciona muy bien con casi todos los elementos de formulario, solo con
radiobutton "no puede establecer el valor de esta manera, aquí necesita
pequeña solución: $ ("entrada"). prop ("comprobado", verdadero) // Por supuesto, puede usar el método click () para emular la // selección de elementos necesaria, pero esto llamará a los controladores de clic, que es no deseable
Con checbox "es un poco más fácil: $ (" input ") .prop (" check ", true)
Verificamos el "check" con un script simple: $ ("input") .prop ("check") // o de una manera un poco más visual $ ("input") .is (": check")
Ahora podemos verificar y enviar un formulario AJAX, ahora queda por resolver el problema con
cambio de forma dinámica, y para ello ya tenemos todos los conocimientos necesarios,
aquí está, por ejemplo, agregando una lista desplegable: $ ("formulario"). append (" ");
¿Y si necesita cambiar la lista? Hay para todas las ocasiones: // tomar la lista de antemano, guardar la tinta var $ select = $ ("selección de formulario"); // agrega un nuevo elemento al menú desplegable $ select.append (" "); // seleccione el elemento requerido $ select.val (" Valor 1 "); // o por número ordinal, comenzando desde 0 $ select.find (" opción: eq (2) "). prop (" seleccionado " , verdadero); // limpiar la lista
Ok, ahora podemos trabajar con el formulario, queda atornillar en una salida más cuerda
errores (sí, sí, para alert () sí a las manos): if ($ (esto) .find ("entrada"). val () == "") ($ (esto) .find ("entrada") .antes ("
Al reenviar el formulario, no olvides eliminar los mensajes restantes del anterior.
comprobaciones: $ (this) .find (". error"). remove ()
Ahora puede combinar las piezas de código y obtener la siguiente opción: $ ("formulario"). Submit (function () (// limpiar errores $ (this) .find (". Error"). Remove (); / / comprobar los campos del formulario si ($ (esto) .find ("entrada"). val () == "") ($ (esto) .find ("entrada") .antes ("
Ahora vale la pena volver a la lista de eventos de formulario y enumerar los que faltan:
enfoque: enfoque en el elemento, también hay una "abreviatura" para trabajar con este evento
método focus (); puede ser necesario si necesita mostrar una pista para un elemento
formas al pasar el mouse
desenfoque: el enfoque ha abandonado el elemento; el método blur () para trabajar con él; útil cuando
validación del formulario a medida que se llenan los campos
seleccionar - seleccione texto en el área de texto y método de entrada select (); si
si van a desarrollar su propio WYSIWYG, se conocerán muy de cerca
enviar: envío del formulario método submit (); usaré a menudo
Así es como nos ocupamos de las formas "terribles", quizás dé algunas más
ejemplos de la vida real, pero esto estará en las próximas versiones de este tutorial :)
1. Complemento para crear formularios en línea "jFormer"
Crea formularios de contacto: realimentación, comentarios, formulario de inicio de sesión, formulario de registro con verificación de la exactitud de la información ingresada.
2. Formulario de registro paso a paso usando jQuery
Una forma ordenada con relleno paso a paso. A continuación se muestra un indicador de llenado de formulario.
3. Formulario paso a paso
Cumplimentar el formulario en varios pasos y comprobar la corrección del llenado.
4. Formulario de contacto del sitio
La validación de la exactitud de la entrada de información se lleva a cabo "sobre la marcha" antes de enviar el mensaje utilizando javascript.
5. Cambio animado entre formularios usando jQuery
Cambio animado de usando jQuery entre el formulario de inicio de sesión del sitio, el formulario de registro y el campo de recuperación de contraseña. En la página de demostración, haga clic en el enlace amarillo para ver el efecto.
6. Formulario de pago de PHP
Se puede utilizar una solución similar para brindar al visitante la posibilidad de comunicarse rápidamente con el propietario del sitio desde cualquier página. En la página de demostración, haga clic en la flecha de abajo para deslizar el formulario.
7. Formulario de registro PHP usando jQuery y CSS3
Formulario con verificación de la veracidad del ingreso de información.
8. Formulario de registro PHP al estilo de Facebook
Bonito formulario de registro implementado con CSS, PHP y jQuery.
9. Formulario de contacto de jQuery "SheepIt"
Se implementó la capacidad de agregar nuevos campos antes de enviar un mensaje.
10. Formulario de contacto "Formulario de contacto Fancy AJAX"
Lindo ordenado Formulario PHP retroalimentación con verificación de la exactitud de la entrada de información. Tecnologías: CSS, PHP, jQuery.
11. Sistema de autorización / registro en el sitio.
12. Formulario de envío de datos
Comprobando la corrección del llenado.
13. Complemento "Contactable" de jQuery
Implementar un formulario de pago para enviar rápidamente un mensaje.