Spartan Code – Blog

En aNieto2k me he encontrado un tutorial muy interesante, tomando como punto de partida un plugin para jQuery denominado babySteps, sobre como dividir formularios en pasos. Esta técnica de dividir los formularios en partes o pasos suele ser bastante habitual en formularios largos.

Revisando los posts del foro, en un rato que he tenido, me he encontrado babySteps, un plugin que hans me muestra y que se encarga de dividir formularios en partes. Un componente ideal para formularios rápidos y complicados.

Revisando el plugin he visto que tu defines los puntos de corte y eso no me acaba de gustar, el tener que poner elementos que no tendrían ningún sentido si no fuera por el plugin no me ha gustado mucho. Así que me montado un pequeño script, que usando jQuery, nos permite obtener lo mismo siguiendo un poco más la semántica del HTML.

stepForm()

Simplemente es una función que se encarga de convertir todos los formularios cuyo atributo class sea stepMe. Únicamente se encarga de cortar el formulario por elementos <fieldset /> haciendo que un formulario largo aparente ser varios de menor tamaño.

Veamos un ejemplo que he montado.

<form action="" method="post" class="stepMe">
	<fieldset>
		<label for="name">Nombre:</label>
		<input name="nombre" id="name" value="" />
		<label for="surname">Apellidos:</label>
		<input name="apellidos" id="surname" value="" />
		<label for="birthday">Fecha de Nacimiento:</label>
		<input name="fnac" id="birthday" value="" />
	</fieldset>
	<fieldset>
		<label for="text1">Text1:</label>
		<select id="text1">
			<option>1</option>
			<option>1</option>
			<option>1</option>
			<option>1</option>
			<option>1</option>
		</select>
		<label for="text2">Text2: </label>
			<input type="radio" id="text2" />
	</fieldset>
	<fieldset>
		<label for="submit">Submitar datos </label>
		<input type="submit" id="submit" value="Enviar" />
	</fieldset>
</form>

Este ejemplo nos divide la página en 3 pasos. Para permitir al usuario moverse entre los pasos he añadido un enlace “Volver” y otro “Seguir“, pero no descarto añadir una pequeña paginación esta noche

Personalización

Podemos definir nuestro propio estilo para los enlaces que se añaden mediante el uso CSS de las clases .nextStep y .backStep.

Además, podemos definir el texto que queremos mostrar en ambos enlaces pasándolo como parámetro. Disponemos de 3 parámetros:

1. Texto Back. (por defecto Volver)
2. Texto Next. (por defecto Seguir)
3. Contenedor. (por defecto fieldset)

$.stepForm();
// Volver / Seguir [fieldset] 

$.stepForm('Back','Next');
// Back / Next [fieldset]

$.stepForm('<-','->', 'p');
// Volver / Seguir [p]

Si somos reacios a usar <fieldset /> podemos pasar como 3er parámetro el tag que vamos a usar como contenedor.

Código

jQuery.extend({
    stepForm: function(txtBack, txtNext, token){
    	var fieldsets = $((token || 'fieldset'), $("form.stepMe"));
        var total = $(fieldsets).length;
	$(fieldsets).each(function(x,el){
			    if (x > 0) {
			      $(el).hide();
			      $(el).append('<a class="backStep" href="#x_' + (x-1) + '">'+ (txtBack || 'Volver') +'</a>');
			      $(".backStep", $(el)).bind("click", function(){
			                $("#x_" + (x - 1)).show();
			                $(el).hide();
			       });
			    }

			    if ((x+1)< total) {
			        $(el).append('<a class="nextStep" href="#_' + (x+1) + '">'+(txtNext || 'Seguir')+'</a>');
			        $(".nextStep", $(el)).bind("click", function(){
			                $("#x_" + (x + 1)).show();
			                $(el).hide();
			        });
			    }
			    $(el).attr("id", "x_" + x);
	});
    }
});

Actualización

Marco Neumann  ha portado el script a MooTools para los usuarios de este framework. La verdad es que la claridad del código no tiene comparación.

Divide formularios en pasos con jQuery » »