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 |
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
[social-download button_id=»589f49b0d3e67e307″ dl_id=»http://www.miguelmanchego.com/wp-content/uploads/2015/04/combo-campos-condicionales.zip» theme=»blue» message=»Compartelo para descargar el ejemplo de los campos condicionales» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=»Tutorial para crear Campos condicionales #html5 @XLogus @xlogus» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]
Miguel extremadamente util, y absolutamente sencillo que exelente trabajo, mil gracias por el aporte Dios te bendiga.
muchas gracias por compartir voy a ver si me sirve