Condicionar partes de un formulario

04/Ene/2008 wForms , , , , , , , , , 6 Comentarios

Con wForms además de poder hacer un sin fin de validaciones de una forma sencilla, también podemos condicionar partes el formulario, de tal manera que dependiendo de un valor de un campo, tengamos acceso a otra parte o directamente que no nos la muestre.

En nuestro caso, para demostrar su utilidad, vamos a crear un formulario con un checkbox, el cual al activarlo permita seguir insertando datos del formulario. En primer lugar pondremos los datos del usuario y en la parte condicionada los datos de la tarjeta. Que solo se ofrecerán al usuario si este los requiere.

Lo primero será cargar la librería wForms. Para ello, en la cabecera de la página insertaremos el siguiente código:

<script type="text/javascript" src="wforms.js"></script>

Empecemos a construir nuestro formulario. Esto es muy sencillo, ya que es un conjunto de campos input y además, para no complicarnos la vida los pondremos de tipo text. Y el checkbox, el cual controlará la condición de mostrar o no.

<form action="#" method="post">
<fieldset>
<legend>Información del usuario</legend>

<label for="nombre">Nombre: </label>
<input type="text" id="nombre"/><br>
<label for="apellido">Apellido: </label>
<input type="text" id="apellido"/><br>

<input id="activar" type="checkbox"/>
<label for="activar">Quiere dejarnos sus datos de la tarjeta</label><br>

<div>
  <label for="tarjeta">Tarjeta: </label>
  <input type="text" id="tarjeta"/><br>
  <label for="fecha-exp">Fecha Expiración: </label>
  <input type="text" id="fecha-exp"/>
</div>

<input type="submit" value="Enviar los datos"/>
</fieldset>
</form>

En este caso hay que hacer notar que hemos puesto los datos de la tarjeta dentro de una capa. Ya que este será el elemento que condicionemos. Aunque lo podríamos hacer sobre un elemento en particular del formulario

Como casi todo en wForms, condicionar partes de un formulario, funciona mediante clases. Para ello hay que conocer dos:

  • switch-id, es la clase que se le asigna al elemento controlador. Este elemento tiene que ser un checkbox, radio o un option.
  • onstate-id y offstate-id, es la clase que se le asigna a los elementos condicionados. Es decir, los que se tienen que mostrar u ocultar. Utilizaremos off u on dependiendo del comportamiento que queramos. Si queremos que al activar el lanzador se oculten usamos off y si queremos que al activar el lanzador se muestren, utilizamos on.

El ID puede ser cualquier identificador que queramos, siempre y cuando coincidan el del switch y el del on/offstate.

De esta forma utilizaremos la clase switch-datos en el checkbox y el offstate-datos sobre la capa. Quedándonos el siguiente código:

<form action="#" method="post">
<fieldset>
<legend>Información del usuario</legend>

<label for="nombre">Nombre: </label>
<input type="text" id="nombre"/><br>
<label for="apellido">Apellido: </label>
<input type="text" id="apellido"/><br>

<input id="activar" type="checkbox" class="switch-datos"/>
<label for="activar">Quiere dejarnos sus datos de la tarjeta</label><br>

<div class="offstate-datos">
  <label for="tarjeta">Tarjeta: </label>
  <input type="text" id="tarjeta"/><br>
  <label for="fecha-exp">Fecha Expiración: </label>
  <input type="text" id="fecha-exp"/>
</div>

<input type="submit" value="Enviar los datos"/>
</fieldset>
</form>

Como último paso hay que añadir unos estilos para que se produzca el efecto de ocultar y mostrar. Estos los añadiremos en la cabecera de la página.

<style type="text/css">
.onstate-datos { display: block; }
.offstate-datos { display: none; }
</style>

Quizás, el mayor inconveniente que tenemos en el uso de este código es que no es muy accesible, ya que, con un javascript deshabilitado no podríamos tener acceso a los datos ocultados. A las malas podemos ofrecer siempre los campos de la tarjeta y que el checkbox lo que haga sea ocultarlos en vez de mostrarlos.

Visualizar el ejemplo | Descargar el código

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

6 comentarios en “Condicionar partes de un formulario”

Víctor Cuervo

Mariano

Yo tengo una duda amigo. Querría saber, en donde se ubica el ACTION del formulario?

Me refiero a que en el ACTION, esta figurando el signo de numero. Como puedo sin que se vea mi ACTION, que en mi caso se llama ingresar.php para permitir al usuario iniciar sesión.

Espero me haya sabido entender. Si eres tan amable, podrías también responderme a mi email?
Saludos y muchas gracias.

Víctor Cuervo

lineadecodigo

@Fer,

El código está en el enlace Descargar el código… 😉
Pero vuelvo a pegartelo.

Descargar código

¿Te sigue sin funcionar o ya te funciona?

He creado un foro en Dudas de Programación para que puedas hacer consultas sobre wForms.

Espero que sea de tu ayuda.

Víctor Cuervo

Fer

No me funciona, me podrias mandar el códig entero con:

(lista) Elige pais

(radio) Otro
(text readonly)

¿cóm hago para que al marcarel radio se active el readonly?

Víctor Cuervo

linuxero

Gracias! Buena la información

Víctor Cuervo

Ferchu

Quiero que en los mensajes no aparezca mi apellido, como hago para configurar el windowslive

Víctor Cuervo

Carolina

hola

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*