Skip to content

Formularios y jQuery

17 septiembre 2010

En esta entrada vamos a ver un pequeño ejemplo que nos servirá de guía para conectar nuestros formularios en HTML y procesarlos a través de jQuery. Esta idea puede resultar muy útil cuando queremos incorporar funcionalidad AJAX a nuestro formulario. Supongamos la siguiente situación: Hemos realizado un formulario de registro en el que el usuario debe introducir sus datos personales (Nombre, Apellidos, Tipo de Usuario y Edad) y queremos almacenar estos datos en una base de datos y mostrar al usuario si se ha realizado correctamente la operación o no, pero sin tener que recargar toda la página. ¿Qué pasos debería llevar a cabo nuestra aplicación?

  1. Mostramos la página con el formulario web
  2. El usuario rellena los campos y presiona el botón de Enviar
  3. Debemos ‘interceptar’ la acción Submit del formulario para manejarla nosotros mismos a través de jQuery
  4. Redireccionamos la request que ha creado el usuario a un Servlet o script PHP o página JSP que se encargue de llevar a cabo la operación de añadir los datos a la base de datos
  5. Devolvemos la respuesta al usuario utilizando AJAX.

Los pasos interesantes (o que yo he considerado interesantes) de esta entrada son: ¿Cómo capturo el envío del formulario con jQuery?¿Cómo muestro la información al usuario sin actualizar toda la página? Vamos a verlo…

Lo primero, obviamente será disponer de nuestro formulario. En este caso vamos a utilizar un formulario que contiene campos de texto y un ComboBox, pero podríamos incluir RadioButtons o Checkbox sin problema.

<form id="formReg" method="POST">
  <select size=1 id="selTipo" name="tipo">
    <option>Administrador</option>
    <option>Invitado</option>
  </select>
  <label>Nombre:</label><input type="text" maxlength="20" name="nombre"/>
  <label>Apellido:</label><input type="text" maxlength="20" name="apellido"/>
  <label>Edad:</label><input type="text" maxlength="20" name="edad"/>
  <input type="submit" value="Dar de Alta"/>
</form>
<div id="resultado"></div>
<!— En este div mostraremos el resultado del la operacion de Alta -->

Como puede apreciarse, es un formulario muy muy sencillo. No hemos añadido el atributo ‘Action’ al formulario, porque esa funcionalidad la vamos a implementar en jQuery. Un dato muy importante en los formularios y que muchas veces pasa inadvertido, es que cuando se envían los datos del formulario, el navegador construye una QueryString con los parámetros necesarios para enviar toda la información que contiene el formulario. Estos parámetros vienen indicados por el atributo ‘name’ de cada componente del formulario, de tal manera que cuando procesemos los datos que contiene la request desde el Servlet o el script PHP o la página JSP, debemos obtener los parámetros preguntando por el ‘name’. Por ejemplo: request.getParameter(“nombre”);  (para una página JSP)

El siguiente paso consiste en programar nuestro código jQuery para interceptar la petición del formulario ‘formReg‘ cuando el usuario haga click en ‘Dar de Alta‘. El objetivo será crear una request personalizada desde el código jQuery, que contenga todos los datos incluidos en el formulario y además enviarla utilizando una petición AJAX. Un punto importante es cómo incluir todos los datos del formulario sin necesidad de ir escribiéndolos uno a uno. Hay que tener en cuenta, que en esta ocasión, costaría poco trabajo añadir a mano en nuestro código jQuery uno a uno los parámetros del formulario porque son sólo tres, pero ¿y si fueran 20? (Pues sí, para empezar sería un aburrimiento tener que rellenar 20 campos para darse de alta, pero se entiende lo que intento expresar no? 😉 )

Este código lo insertaríamos en la misma página en la que tuviéramos nuestro formulario y, como viene siendo habital con jQuery, lo insertaremos dentro de $(document).ready()… Vamos al código:

<script type="text/JavaScript">
  $(document).ready(function(){
    $("#formReg").submit(function(){
      $.ajax({
        type: "POST",
        url: "procesa.jsp",
        async: false,
        //Serializamos los datos del Form. Los parámetros son los NAME del formulario, no los id
        data: $(this).serialize(),
        success: function(data){
          $("#resultado").html(data);
        },
        error: function(xml,msg){
          $("#resultado").text("Error");
        }
      }); //$.ajax
      return false;
    }); //submit
  }); //ready
</script>

Veamos detenidamente el código. En primer lugar, estamos redefiniendo la accion ‘Submit’ del formulario para que realice la función que le estamos especificando. En este caso le indicamos que debe crear una petición AJAX de tipo POST y debe redirigir la petición a la página “procesa.jsp” que es la encargada de validar los datos e insertarlos en la base de datos (esta funcionalidad para esta entrada, nos da igual cómo se realice). La página JSP nos va a devolver un <span> con el resultado de la operación de Alta. El aspecto más interesante de este script, viene en el parámetro ‘data’ de la petición AJAX. Si observamos el código veremos, que en data estamos incluyendo: $(this).serialize()…¿Qué significa exactamente?

$(this) hace referencia al elemento en el que nos encontramos en ese momento, en este caso el formulario ‘formReg‘; y ‘serialize()‘ es un método de jQuery que se utiliza con elementos del tipo Form y cuya función es crear un String en notación URL-Encode estandar con todos los parámetros del formulario junto con su correspondiente etiqueta ‘name’. Por ejemplo si en el formulario hemos introducido los datos de: Frodo Bolson, este método crearía una cadena de la siguiente forma:

nombre=Frodo&apellidos=Bolson&edad=400&tipo=Administrador

(realmente desconozco cuántos años tiene frodo xD)

Estos datos, al ser una petición de tipo POST, van a enviarse en el body de la request.

Posteriormente, con ‘success‘ le indicamos qué debe hacer si la petición se ha realizado correctamente. En esta ocasión le estamos diciendo que nos incluya los datos que devuelve la página JSP ‘procesa.jsp’, dentro del <div> resultado. De esta forma, no es necesario recargar toda la página para que el usuario conozca la respuesta. Al final del script, podemos ver un ‘return false;’ esto indica que jQuery no debe devolver el control al formulario ya que el envío lo vamos a realizar nosotros mismos. Si no pusiéramos ese return, una vez que jQuery hubiera hecho el envío de los datos, devolvería el control al formulario y éste llevaría a cabo su propio Submit…que para eso lo tiene. (o lo tendría si lo hubiéramos especificado)

Por supuesto este es un ejemplo extremadamente simple, sin más pretensión que mostrar cómo interceptar el envío de un formulario para procesarlo mediante jQuery y dotar a nuestra página de mayor dinamismo. Cualquier sugerencia, mejora, duda… será bien recibida 🙂

Más Info:

Web Oficial jQuery | jQuery API

Anuncios
2 comentarios leave one →
  1. mario permalink
    12 diciembre 2010 02:00

    hola! mi sugerncia es que en vez de poner:

    return false;

    SIMPLEMENTE cambies el type del button y lo pongas como un type= “button” y no “submit”

    asi podrias quitar el return false

    • rekkeb permalink*
      12 diciembre 2010 16:35

      Gracias Mario! Anotado queda tu aporte 😉

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: