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.
[cc lang=»html»]
[/cc]
Crear las opciones del formulario
[cc lang=»html»]
[/cc]
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
[cc lang=»javascript»]
function elegir_opcion(combo) {
$tipo = jQuery(combo).val();
$campos = jQuery(«#»+$tipo).html();
jQuery(«.opcionesWrapper»).html($campos);
}
[/cc]
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=»https://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»/]
