Seleccionar opción para mostrar un formulario u otro
En este artículo vamos a ilustrar como tener un combo o selector que tras cambiar de opción se muestra un contenido u otro.
En el ejemplo que vamos a detallar, los contenidos que pretendemos mostrar son formularios. Se trataría de que si el usuario elige una de las opciones: estudiantes, trabajador, autónomo o en paro mostramos un formulario u otro.
Como tenemos 4 combos en el selector principal, necesitaremos tener 4 contenedores escondidos.
Para mostrar el formulario que toca según la opción escogida, hemos creado la siguiente función jQuery que deberemos incluir junto con la librería jQuery en nuestro <head>:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function mostrar(id) {
if (id == "estudiante") {
$("#estudiante").show();
$("#trabajador").hide();
$("#autonomo").hide();
$("#paro").hide();
}
if (id == "trabajador") {
$("#estudiante").hide();
$("#trabajador").show();
$("#autonomo").hide();
$("#paro").hide();
}
if (id == "autonomo") {
$("#estudiante").hide();
$("#trabajador").hide();
$("#autonomo").show();
$("#paro").hide();
}
if (id == "paro") {
$("#estudiante").hide();
$("#trabajador").hide();
$("#autonomo").hide();
$("#paro").show();
}
}
</script>
Si nos fijamos, a la función mostrar(id) le estamos pasando un parámetro que no es más que la id de la opción escogida.
Según la opción escogida, dentro de la función miramos de mostrar lo que toque y ocultar el resto.
En nuestro <body> tendremos 4 contenedores ocultos como el siguiente:
<div id="estudiante" style="display: none;"> <h2>Si eres estudiante...</h2> <form action="index.php" method="post"> <p>Nombre:<br/> <input type="text" name="nombre" /></p> <p>Centro:<br/> <input type="text" name="centro" /></p> <input type="submit" name="send" value="Enviar" /> </form> </div>
Y también tendremos un formulario principal el cual contiene el combo con las opciones a escoger:
<form action="index.php" method="post"> Estado actual: <select id="status" name="status" onChange="mostrar(this.value);"> <option value="estudiante">Estudiante</option> <option value="trabajador">Trabajador</option> <option value="autonomo">Autónomo</option> <option value="paro">En el paro</option> </select> </form>
Y con todo esto ya tendríamos la funcionalidad que se pretende con este artículo.
Autor
¿Buscas trabajo de programador?
66 respuestas a “Seleccionar opción para mostrar un formulario u otro”
Deja una respuesta
188 artículos que te podrían interesar
Ver más sobre
Muchas gracias, me sirvió al tiro
MUCHAS GRACIAS ME SIRVIÓN MUCHISIMO
Excelente ejemplo, me sirvio muy bien para lo que estaba haciendo, gracias por el aporte
Deberias subirlo el proyecto para que podamos descargarlo sin problemas
Donde consigo el JQuery
https://jquery.com/download/
bue día muy buen tips amigo una pregunta como puedo hacerlo para un input type=»checkbox»
Una forma rápida de probarlo es agregar el atributo onClick llamando a la función. Entiendo que debe funcionar pero quizá tendrás que controlar si el input tipo checkbox está checkeado o no
Hola, muy bueno, me función bien, tengo una pregunta lo quiero repetir en varios campos en el mismo formulario, pero no me guarda todos solo uno.
necesito ayuda, algo asi quiero desarrollar pero despues de procesar los datos de php me muestre el formulario de acuerdo a lo que extrae de la base de datos
Hola,
Para eso necesitas desarrollar algo más complejo utilizando Ajax quizá.
En el siguiente enlace tienes un montón de ejemplos de uso de Ajax para que te hagas una idea:
https://www.jose-aguilar.com/blog/secciones/ajax/
Saludos
Buenisimo! muchas gracias! Necesitaba hacer un formulario que muestre unos datos solo si el que completaba era casado, cualquier otro estado civil no, asi que hice solo un if con un else en el script y anda perfecto!
Hola. Me a gustado y a funcionado bien. Pero me surge una duda, ¿como se procesarían los datos con php?
Hola,
Debes programar la acción que debe producirse tras pulsar el botón enviar cono PHP.
En el lugar deseado de tu archivo PHP principal o en el archivo que recibe la acción del formulario debes colocar el código que realizará el proceso. En el caso del ejemplo debes agregar una condición similar a:
if (isset($_POST['send'])) {
//procesar datos
}
Espero te sirva,
Saludos
Excelente ejemplo, más claro imposible 😀
excelente ejemplo muy útil para poder empezar a programar
Ese código va en solo archivo??
En el caso del ejemplo si pero tu lo puedes estructurar como quieras.
todo va en solo archivo??
Excelente aporte, me ha funcionado tal cual, bueno solo hice unas adecuaciones para lo que necesitaba en mi formulario pero ha funcionado genial!!!
Gracias!
Hola Buenos dias.
Disculpen me gustaria pudieran enviar este pequeño proyecto, lo eh intentado pero no me corre, inclusive con el mismo archivo de javascript.MI correo es lili190395@hotmail.com
Hola que tal,
Te lo tendría que preparar.
Para este tipo de ayudas que se salen de lo que hay disponible en el blog lo que podemos hacer es que nos envíes un correo a blog@jose-aguilar.com con todos los detalles para que revisemos como podemos proceder.
Saludos
ola, muy buen tutorial, ya lo probé y si jaló, sólo que tengo un detalle espero me puedan ayudar, lo que pasa esque quiero hacerlo con datos de mi base de datos el detalle está así, es para agendar citas en un hospital de especialidades, cada paciente tiene uno o varios medicos asignado, entonces ago mi consulta y en mi formulario me arroja en el select laas especialidades de sus medicos, quiero que cuando el paciente seleccione una de ellas me aparezca una tabla de horarios de ese medico, en el cual va a seleccionar el horario de reserva de su cita, ya modifique pero no me jala, quiero suponer que algo tiene que ver esta parte del codigo: Estudiante, el detalla está en que mi value lo adquiere de mi base de datos y no puedo modificarlo, entonces como ole pudo hacer?
sorry por eso de estudiate, esque copié la parte del valor del select del tutorial y me arrojó eso, jajajaja
Hola buenos días,
Para conseguir lo que deseas necesitas usar AJAX para acceder a la base de datos. Quizá en nuestra categoría Ajax puedas encontrar un ejemplo de lo que necesitas:
https://www.jose-aguilar.com/blog/secciones/ajax/
Quizá puedas estar interesado en que te hagamos el trabajo. Nos puedes enviar un correo a blog@jose-aguilar.com con todos los detalles para que revisemos como podemos proceder.
Saludos
hola antes q nada agradecer el codigo lo probe y funciona muy bien ahora si al seleccionar una opcion de para insertar a una tabla en mysql como se podria hacer
Hola,
Para insertarlo en una base de datos tendrás que añadir un formulario con un botón. Recoger los valores del formulario y luego hacer las queries necesarias para insertar en la tabla que sea. El siguiente artículo puede ayudarle a insertar en la base de datos:
http://www.jose-aguilar.com/blog/interactuar-con-una-base-de-datos-utilizando-mysqli/
En el post se habla de UPDATE pero para INSERT se puede hacer lo mismo.
Saludos
hola muchas gracias por responder lo q pasa esq stoi realizando un proyecto para mi escuela pero ahi al seleccionar el primer o segundo formulario me permita insertar en una tabla en mysql 🙂 de antemano gracias lei el articulo q me recomendaste , gracias
Hola, ¿y si solo quisiera ocultar el contenedor de una opción del comboBox y las demas opciones que carguen en otra pagina, como sería?
Hola, para tu caso se podría hacer con enlaces a otra página sin jQuery, no?
hola amigo! estoy tratando de hacer lo que pusiste en el código pero a pesar de que selecciono lo que quiero no oculta todas la opciones, ya de hecho descargue el jquery y nada! me podrías ayudar?
saludos
Hola que tal,
Para este tipo de ayudas que requieren más tiempo de trabajo lo que podemos hacer es que nos envíes un correo a blog@jose-aguilar.com con todos los detalles para que revisemos como podemos proceder.
Saludos
Muy buen post me ayudo mucho gracias por compartir
muy buen código me funciono perfectamente para otra versión que necesitaba muchas gracias amigo
Hola, funciona muy bien. Para los que deseen ver el codigo, en la página de ejemplo que nos nuestra Jose Aguilar pueden dar boton derecho y dan clic donde dice «ver codigo fuente» alli esta el codigo perfectamente funcionando. Funciona perfecta mi adaptacion en ASP.
Hola…
Estoy haciendo algo parecido
Me podrían facilitar el código
Mi correo es paulina-margarita@hotmail.com
Se los agradezco
Hola buenas tardes,
No tenemos disponible ahora mismo poder acceder al servidor a crear un paquete de descarga. De todas formas el código está implícito en la explicación del código. Lo puedes copiar de ahí leyendo las indicaciones.
Saludos
excelente post, todo muy sencillo y al 100! Gracias
Y como puedo implementarlo en mi codigo, yo programo con programacion orientada a objeto en php, osea clasifico los archivos en carpetas, los index en una carpeta vista, los controladores en una carpeta control los modelos de base datos en modelos y los js en carpeta js, osea tengos los formularios en una carpeta, ya hechos.
Perfecto, muchísimas gracias. Me he vuelto loco buscando esto y lo pones muy sencillo. Es un gusto iniciarse en programación cuando hay gente como vosotros que hace tutoriales.
Saludos
al momento de cambiar de seleccion quisiera que elimine los datos que se le habian insertado
Compañeros Necesito Hacer Esta Funcion doble vez.En la parte Superior Me funciona Normalmente , pero En La parte Inferior Del Formulario no he podido plantear la funcion, y pues la verdad no se como poner En la parte superior de java La segunda Funcion Mostrar.
Ayuda
yo copio el codigo y baje el archivo .css y el js y no me funciona… alguien sabe porq???
Si nos facilitas el enlace de tu página te podríamos ayudar más fácilmente
amigo excelente tutorial, quisiera pedirte ayuda estoy haciendo un proyecto donde tengo un formulario y registro datos personales de un estudiante quiero colocar un botón siguiente (next) y que me lleve a otro formulario para registrar los datos de salud del mismo estudiante.
Gracias espero me puedas ayudar con la función para llamar al siguiente formulario
Mi estimado bien con el codigo, pero esto tambien puede servirme para mantener un encabezado con botones y de acuerdo a la opcion que elija me muestra un formulario que corresponda?, Gracias!
si, solo tendrás que hacer un pequeño cambio
hola gracias por tu aporte, ejecuto el codigo pero no muestra los formularios, tambien cree el stylo y la libreria, podria mandarme el codigo por favor catilin27@gmail.com
DIscupal me puedes ayudar necesito lo mismo pero q los datos del combo que estan filtrados desde una base de datos, al escojer yo una opcion me parecesca un formulario, pero cuando yo escoja otra opcion me despliegue el mismo formulario pero ya sin algunas opciones para llenar .
Que tal hermano, estoy intentando generar una serie de formularios dependiendo de la opción seleccionada en el (el cual tiene como opciones: 1,2,3… y así sucesivamente). Dependiendo de la opción seleccionada, debería mostrar uno de los formularios, siguiendo más o menos la siguiente estructura:
d1:
d1:
d2:
d1:
d2:
d3:
Estoy utilizando el script que ud propone, para mostrar u ocultar el seleccionado. Al momento de enviar los datos, para ser procesados, estos no son enviados por el método POST, mi pregunta es: si es posible utilizar un «name» repetido en los input de cada formulario, como esta indicado en el fragmento de código anterior; destaco que en el primer formulario estoy utilizando el name «d1», y el mismo se repite en los siguientes formularios. Esto es posible para el envío de datos POST, o quizás es este el error cometido?? Gracias de antemano… Saludos.
Intenta poner nombres distintos.
Disculpa me podrias enviar tu codigo. Es que lo hice pero no me funciona.
Mi correo es jaz_1991_amor@hotmail.com
copio tal y cual el código pero no me funciona que le faltara ya descargue el js. que podrá ser
nos podrías poner el enlace para verlo….
para enviar los datos a un formulario?¡¡?¡?¡ no me los envia por mas que le spongo id y name¡??¡
cual es la solucion ¡?¡
Este amigos Aqui esta el JS que les faltaa Se a olvidado http://www.jose-aguilar.com/scripts/jquery/select-show-forms/js/jquery.js
copie el codigo en mi pagina y no me funciona no me oculta las div me muestraa los datos pero fuera y no ayo como solucionar, mearia favor de mandarme el codigo al correo sejo_roberto-15@hotmail.com
Yo creo que lo único que puede faltarte es el archivo jquery
Te lo puedes descargar viendo el ejemplo en funcionamiento o descargarlo de la página oficial de jquery.
Muchísimas gracias, funciona muy bien. Lo había hecho más complicado, pero tu código es compacto y eficiente. Gracias
Me podrian enviar el codigo a mi correo maricela_amado1990@hotmail.com
Yo lo transformé a esto. mis id de las option en vez de ser por nombre son numéricos, pero mis divs siguen llamandose por su nombre. Con un poco de jquery y algo de efecto.
$(‘#status’).change(function () {
if($(‘#status option:selected’).val()==’2′){
$(‘#factura’).show(500);
$(‘#boleta’).hide();
}
});
Si quieren que aparezca algo inmediatamente le agregan el trigger:
$(‘#status’).change(function () {
if($(‘#status option:selected’).val()==’2′){
$(‘#factura’).show(500);
$(‘#boleta’).hide();
}
}).trigger(‘change’);;
Voy a probar a ver que tal Gracias
buen dia…
implemente el codigo con mis datos…. tengo una duda… me muestra los datos que tengo dentro div por fuera (no los oculta)… y el div me lo muestra en la parte superior…haciendo el efecto, ocultar y mostrar
Hace falta algun archivo ? coloco el codigo y no me sirve lo estoy probando en wamp 2.0
Lo mas probable es que te falten los estilos. Si observas el código fuente del ejemplo en funcionamiento, te darás cuenta.
ya copie y pegue los codigos pero no me funciona el programita… que me hace falta… en DW el jquery.is pero no se que sea eso… gracias