HTML5: combo con campos condicionales

En este tutorial veremos como crear un formulario cuyos campos dependan de un combo, el ejemplo se puede cambiar para usar cualquier tipo de campos o cualquier cantidad basta con alterar las opciones contenidas en el div “opciones”.

Lo primero es crear el combo #tipo con sus opciones, allí debemos fijarnos que los value sean iguales a los ID de los div que están dentro de “opciones”, de esta forma al elegir una opción se usará el contenido del div respectivo.

1
2
3
4
5
6
<select id="tipo" name="tipo" onchange="elegir_opcion(this);">
<option value="">Elija un tipo</option>
<option value="op1">Tipo 1</option>
<option value="op2">Tipo 2</option>
<option value="op3">Tipo 3</option>
</select>

Crear las opciones del formulario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="opciones">
<div id="op1"><form>Nombre: <input name="op1" required="required" size="30" type="text" />

Direccion: <input name="op1" size="30" type="text" />

DNI: <input name="op1" size="30" type="text" />

<input class="btn" name="submit" type="submit" value="ENVIAR" /></form></div>
<div id="op2"><form>Razón Social: <input name="op1" required="required" size="30" type="text" />

Direccion: <input name="op1" required="required" size="30" type="text" />

RUC: <input name="op1" size="30" type="text" />

<input class="btn" name="submit" type="submit" value="ENVIAR" /></form></div>
</div>

Podrían alterar la posición de la etiqueta form para que capture también al combo principal o incluso más campos que sean fijos, ya es cuestión de jugar un poco con el código.
Para añadir más opciones basta añadir más div con ID op3, op4, op5, etc y esos mismos valores ponerlos en el combo principal.

El Javascript del Combo y los campos dependientes

1
2
3
4
5
function elegir_opcion(combo) {
$tipo = jQuery(combo).val();
$campos = jQuery("#"+$tipo).html();
jQuery(".opcionesWrapper").html($campos);
}

Yo he usado una función muy sencilla que simplemente captura la opción elegida, en la segunda línea captura los campos que corresponden a dicha opción y en la última línea coloca esos campos en un div contenedor, podrían hacer que el combo no invoque a la función sino que jQuery capture ele evento pero no lo he puesto para no complicar ele ejemplo y sea muy claro su funcionamiento.

Si te ha gustado este tutorial y os parece util no olvideis compartirlo o darle tweet además así podrán descargar los archivos del ejemplo o pueden ver el ejemplo funcionando AQUI

 

Compartelo para descargar el ejemplo de los campos condicionales


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Time limit is exhausted. Please reload the CAPTCHA.