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