Micaela 20 de octubre de 2009 a las 09.04
   Imprimir artículo
elWebmaster.com

C贸mo dividir un formulario extenso en varios pasos usando jQuery


formwizardLos formularios divididos en pasos, tambi茅n llamados “wizard“, le indican al usuario en todo momento cu谩ntos pasos le quedan para completar la forma, lo que los hace m谩s din谩micos y simples.

En esta nota te ense帽aremos paso a paso c贸mo dividir en pasos largos formularios web que resultan tediosos para los usuarios 隆Adem谩s incluimos un plugin para descargar que har谩 que todo sea todav铆a m谩s sencillo!

Nuestra Tarea

Si por alguna raz贸n en tu formulario todos los campos deben estar sem谩nticamente divididos en fieldsets, cada fieldset claramente describir铆a cada grupo de campos. Aunque muchos ejemplos en la web hoy en d铆a tienen aspecto diferente, as铆 es como debe ser.

Haz clic aqu铆 para ver una demostraci贸n del formulario resultante 禄

As铆, podemos decir que cada grupo de campos representan una sub-tarea de una tarea m谩s grande – llenar el formulario web entero. As铆, cada tarea secundaria puede convertirse en un paso con una descripci贸n, campos de entrada y de navegaci贸n que es com煤n para las formas asistentes. El proceso entero se puede hacer en varios pasos sencillos.

1. Crear “steps”

El c贸digo deber铆a lucir as铆:

  1. form id="SignupForm" action="">
  2.     <fieldset>
  3.         <-- input fields -->
  4.     </fieldset>
  5.     <fieldset>
  6.         <-- input fields -->
  7.     </fieldset>
  8.     <fieldset>
  9.         <-- input fields -->
  10.     </fieldset>
  11. </form>

Vamos a explicar el c贸digo siguiente. A fin de determinar la cantidad de pasos que habr谩, tenemos que seleccionar todos los fieldsets y obtener el tama帽o de este conjunto. A continuaci贸n, iterar a trav茅s de este conjunto envuelto (que devuelven todos los fieldsets), envolver cada fieldset en un div y anexar un p谩rrafo que llevar谩 los botones “Atr谩s” y “Siguiente”.

Ahora viene la parte divertida. Si 茅ste es un primer fieldset en un conjunto envuelto, vamos a crear s贸lo el bot贸n “Siguiente” y a hacer este paso visible. Si es la 煤ltima fieldset en un conjunto envuelto, vamos a crear s贸lo el bot贸n “Atr谩s”. En los dem谩s casos, crearemos dos botones. Los m茅todos para la creaci贸n de botones se explican m谩s adelante en este tutorial.

  1. var steps = $("#SignupForm fieldset");
  2.  
  3. var count = steps.size();
  4.  
  5. steps.each(function(i) {
  6.     $(this).wrap("<div id='step" + i + "'></div>");
  7.     $(this).append("<p id='step" + i + "commands'></p>");
  8.  
  9.     if (i == 0) {
  10.         createNextButton(i);        // to do
  11.         selectStep(i);                  // to do
  12.     }
  13.     else if (i == count - 1) {
  14.         $("#step" + i).hide();
  15.         createPrevButton(i);       // to do
  16.     }
  17.     else {
  18.         $("#step" + i).hide();
  19.         createPrevButton(i);       // to do
  20.         createNextButton(i);       // to do
  21. }
  22. }

Ahora expliquemos c贸mo crear los botones y c贸mo los usuarios se mover谩n a trav茅s del asistente.

2. Crear botones de atr谩s y adelante y a帽adir interacci贸n

La creaci贸n de los botones no es tan dif铆cil. Cada bot贸n tendr谩 un nombre 煤nico (por ejemplo, step1next, o step3prev) y se a帽adir谩 a sus paneles creados en el paso anterior. Con el fin de a帽adir algo de interacci贸n, y esto es permitir que se desplacen entre los pasos, tenemos que a帽adir un evento clic en cada bot贸n. As铆 es como funciona:

* Cuando el usuario pulsa el bot贸n Atr谩s se oculta el paso actual, se muestra el anterior y llama al m茅todo selectStep (), que lo marcar谩 como actual.
* Cuando el usuario presiona el bot贸n Siguiente se oculta el paso actual, se muestra el siguiente y se llama al m茅todo selectStep (), que lo marcar谩 como actual.

  1. function createPrevButton(i) {
  2.  
  3.     var stepName = "step" + i;
  4.  
  5.     $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");
  6.  
  7.     $("#" + stepName + "Prev").bind("click", function(e) {
  8.         $("#" + stepName).hide();
  9.         $("#step" + (i - 1)).show();
  10.         selectStep(i - 1);
  11.     });
  12. }
  13.  
  14. function createNextButton(i) {
  15.     var stepName = "step" + i;
  16.     $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");
  17.     $("#" + stepName + "Next").bind("click", function(e) {
  18.         $("#" + stepName).hide();
  19.         $("#step" + (i + 1)).show();
  20.         selectStep(i + 1);
  21.     });
  22. }

La funci贸n selectStep() remueve la clase CSS “current” de todos los pasos y la asigna s贸lo al que se encuentra actualmente seleccionado.

  1. function selectStep(i) {
  2.     $("#steps li").removeClass("current");
  3.     $("#stepDesc" + i).addClass("current");
  4. }

En este momento, el asistente es funcional. Pero esto no es todo. Ser铆a buena idea que apliques algo de dise帽o en la interfase de pasos restantes.

3. Crear informaci贸n de “pasos restantes”

Esto es m谩s f谩cil de lo que puede parecer a primera vista. En el comienzo mismo de nuestro c贸digo hay que a帽adir una lista no ordenada que ser谩 un contenedor de la informaci贸n de pasos a la izquierda. Adem谩s de esto, se ocultar谩 el bot贸n de suscripci贸n. Queremos que sea visible s贸lo en el 煤ltimo paso.

  1. var steps = $("#SignupForm fieldset");
  2. var count = steps.size();
  3.            
  4. $("#SaveAccount").hide();
  5. $("#SignupForm").before("<ul id='steps'></ul>");

Tambi茅n tenemos que ampliar cada funci贸n () y a帽adir informaci贸n sobre los pasos para cada fieldset envuelto en conjunto. Cada paso tendr谩 su n煤mero natural, comenzando con 1. A continuaci贸n del n煤mero de paso vamos a a帽adir una descripci贸n que se extrae del elemento <legend> .

  1. steps.each(function(i) {
  2.     var name = $(this).find("legend").html();
  3.     $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");
  4.     ...
  5. });

Vamos a hacer una cosa m谩s. Dado que el bot贸n de env铆o debe ser visible s贸lo en el 煤ltimo paso, vamos a ocultarlo cada vez que el usuario presiona Siguiente. S贸lo si el usuario llega a la 煤ltima etapa, debe ser visible.

  1. $("#" + stepName + "Prev").bind("click", function(e) {
  2.     $("#SaveAccount").hide();
  3. });
  1. $("#" + stepName + "Next").bind("click", function(e) {
  2.     if (i + 2 == count)
  3.         $("#SaveAccount").show();
  4. });

Si deseas ver todo el c贸digo fuente completo, desc谩rgalo o visualiza el demo.

Plugin para un uso m谩s f谩cil

Ser铆a una l谩stima no crear un plugin que permita todo esto en una sola l铆nea de c贸digo. Se llama FormToWizard. Creo que es claro lo que hace. Con el fin de aplicar el plugin tendr谩s que agregar una referencia al archivo de script y aplicarlo al emento y <form> .

  1. <script type="text/javascript" src="formToWizard.js"></script>
  2. $("#SignupForm").formToWizard();

Si deseas ocultar un bot贸n de env铆o (o marcador de posici贸n de varios botones) se puede agregar un par谩metro sumbitButton con el nombre del elemento que se desea que se oculte.

  1. $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })

Liviano y compatible con plataformas cruzadas

Este plguin pesa s贸lo 2,3KB y con compresi贸n puede ser todav铆a m谩s peque帽o. Es compatible con todos los grandes navegadores: FireFox, Google Chrome, Safari, Opera, Internet Explorer 8, 7 y 6.

Haz clic aqu铆 para ver una demostraci贸n del formulario resultante 禄

Fuente: Janko at Warp Speed


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (11)

  1. andy dice:

    y no hay un enlace de ejemplo?

  2. Morton dice:

    Hola, Andy

    El ejemplo del formulario resultante lo puedes ver aqu铆:

    Haz clic aqu铆 para ver una demostraci贸n del formulario resultante 禄

    A su vez, el enlace de ejemplo ya fue agregado a la nota. 隆Gracias!

  3. M贸nica Baquerizo dice:

    Hola, el ejemplo funciona de maravilla.
    Excelente tutorial !

  4. jorlucaco dice:

    Holas el pluguin funciona excelente en firefox pero tengo problema en ie 6 …. habria algo adicional k realizar para que funcione en ie6 correctamente … gracias

  5. sysmaya dice:

    De 路路路路路 el ejemplo.
    Muy pero muy practico.

  6. Didier P茅rez dice:

    Hola Buen D铆a,
    Me gustar铆a saber que plugin para wordpress usas para colorear el c贸digo.
    De antemano Gracias

  7. Alejandra dice:

    El plugin se llama iG:Syntax Hiliter.

  8. F Jose dice:

    Hola
    Veras, llevo buscando algo en esta linea y me parece muy buena opcion. De hecho la he implementado y funciona bien, pero lo que no se es como y donde recojo los datos que me han introducido…驴?驴?驴?

    Una mano gorda que me ayude por favor ?

  9. RubensaiD dice:

    He utilizado este script para un formulario para armar un buffet… y tenia la necesidad de que el usuario puede dirigirse a cualquier parte del form sin tener que estar presionando los botones back, next.. agregue este peque帽o codigo despues de function SelectStep()

    //Habilitando Seleccion en la Lista
    $(“ul#steps li”).click(function(c) {
    ac = c.target.id.charAt(8);
    if(ac==”) ac=0;
    for(ab=0; ab<count; ab++) {
    if(ab!=ac) $(‘div#step’+ab).hide();
    }
    $(“#step”+ac).show();
    selectStep(ac);
    if(ac==count-1) {
    $(submmitButtonName).show();
    } else {
    $(submmitButtonName).hide();
    }
    });

    para hacerlo mas vistozo se puede a帽adir al css un estado hover a los elementos li del seleccionador de paso e incluso poner un puntero tipo pointer (manito)

  10. victor palomo dice:

    mil disculpas estoy empezando en esto de la progracion web y la verdad me parece un buen plugin mi duda es como recojo los valores que me insertan en los input y los guardo en mi base de datos, ademas si en algun momento me gustaria que existiera un boton para cada seccion que al darle guardar me recoja la informacion y la guarde como implemntaria dicho boton
    de antemano mil gracias

  11. Gonzo I帽arritu dice:

    Gracias por el tutorial!!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder