Javascript: Ocultar/mostrar campos en un formulario.

Hoy, por ser sábado y porque actúa el Chikilicuatre esta noche, voy a escribir una función sencillita, así no me tiro mucho rato en el ordenador xD

Al tema, me han pedido un formulario de contacto en el que si el usuario elige una opción, aparezca un campo adicional.

Ej. Si en el grupo de opciones de «A través de donde nos ha conocido» elige la opción «Otros», aparece un campo de texto para introducir la información.

Lo primero es crear el formulario:

//se le asigna un name al formulario de contacto.
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="fcontacto">
//inputs

<p>A través de donde nos has conocido:<br />
//importante llamar a la función
<input type="radio" name="Conocido" value="Google" id="Conocido_0" onclick="mostrarReferencia();" /> Google
<input type="radio" name="Conocido" value="Otros" id="Conocido_1" onclick="mostrarReferencia();" /> Otros
</p>

//div oculto
<div id="desdeotro" style="display:none;">
<p>Referencia de la oferta:</p>
<p><input type="text" name="otro" class="input" /></p>
</div>

Y la función que tenemos que agregar al head:

//funcion javascript en la cabecera del documento
<script type="text/javascript">
<!--
function mostrarReferencia(){
//Si la opcion con id Conocido_1 (dentro del documento > formulario con name fcontacto >     y a la vez dentro del array de Conocido) esta activada
if (document.fcontacto.Conocido[1].checked == true) {
//muestra (cambiando la propiedad display del estilo) el div con id 'desdeotro'
document.getElementById('desdeotro').style.display='block';
//por el contrario, si no esta seleccionada
} else {
//oculta el div con id 'desdeotro'
document.getElementById('desdeotro').style.display='none';
}
}
-->
</script>

Atención: Hay que llamar a la función desde los campos apropiados, cambiar los id’s y name’s ajustándolos a tu formulario, colocar el script con la función en el <head> de tu documento.

Y listo! Fácil y sencillo.. xD

Entendiendo esto ya podéis adaptarlo a más situaciones, viene muy bien tenerlo a mano :P

  • 24 mayo 2008
  • Maquetación
  • , , , ,

69 comments on “Javascript: Ocultar/mostrar campos en un formulario.”

  1. Hola!!! n_n la verdad espectacular me salio!!!! PEEEEEEEROOO solo me funciona con el Chrome… no me funciona con el explorer.. porque sera? me dice que text1 es undefined.

    aqui el codigo muy muy simple.

    Accenture

    function mostrarOcultar() {

    text1.style.display=»none»;
    }

  2. Hola max, pásame el código por email y te lo reviso ;)
    Sale tu mensaje en blanco porque has metido php y lo interpreta, a ver si esta semana lo miro y arreglo esto para que podáis comentar los problemas de vuestros códigos guay.

  3. hola quisiera saber si se puede emplear con un 1

    si select < 3 {
    mostrar.campodetexto
    if campodetexto = 0{
    mensaje «llena campo de texto»
    }
    }

    else {
    enviar valores de select a database
    no mostrar campo de texto
    }

    alguien sabe ayuda porfavor… se los agradezco mucho, si tienen alguna solucion, avisarme porfavor

    1. Hola zamudio!
      No entiendo muy bien que quieres decir con un 1, ¿Lo puedes explicar mejor, please?
      Lo que entiendo que quieres es: Si el campo de texto está vacio que muestre un mensaje y si está lleno que lo envíe a la base de datos, ¿Puede ser?

  4. ok han cambiado las coas… logre hacer lo que antes no pude… vaya redundacia vdd… pero ahora os explico mejor ok… ha por sierto gracias por su pronta respuesta y felicidades por esl sitio esta genial…

    sobre la cuestion anterior fue… ¿como se puede lograr?…
    validar el valor de un select, con opciones de valor del 1 – 5, si select es mayor a 0, muestra un alert de que resta seleccionar opcion de pregunta ‘#X’, y si select es menor a 3, mostrar el campo oculto textarea este mismo validado de forma que si esta vacio muestre un msj de que ahun no se a ingresado caracter…

    si value select es mayor a 4 ocultar textarea

    de otra forma enviar datos del formualario a php…

    ahora la pregunta ¿como puedo lograr lo anterior?, MUCHAS GRACIAS POR SU ATENCION Y ESPERO QUE SEA ALGO CLARO… SI NECESITA VER EL SCRIPT QUE LLEVO HASTA AHORA CON GUTO SE LO MOSTRARE OK… si es posible ponernos en contacto sería mas que genial, saludos y hasta pronto… denuevo gracias…

    el codigo que presentan en este post es lo que buscaba… pero ahun no funca deacuerdo al plan…

    1. hola oye me ayudarias con lo que comentaste igual quiero hacer esto pero con un select pero no me queda y lei que a ti ya te quedo la idea que yo tengo es que por ejemplo quiero tener 40 input text escondidos y dependiendo de la cantidad de pedidos pues aparescan y seria mas practico con un select quee con radios entonces cuando coloque por ejemplo 4 pedidos que aparescan los 4 inmput tex que estaban ocultos

  5. Soy nuevo en esto de los formularios e quiero disenyar un formulario de inscripción (validación + MySQL + email).
    Me esta ayudando mucho tu web con los artículos publicados pero me atasco a cada momento.
    Respecto a este ejemplo:
    Me da un error de «Se esperaba un objeto»
    He puesto todo el codigo en un ejemplo.html el script en el head y el form en el body pero me sale el erro descrito.
    Alguna ayuda?

  6. Hola, primero gracias por este codigo, muy util.
    Ahora la pregunta(s)
    Como podria aplicar esto para que me muestre por ejemplo
    Teniendo solo dos opciones
    1) empresa
    2) universidad

    Que segun seleccione empresa o universidad se muestren campos a llenar y que ademas pase el dato empresa o universidad a una base de datos?

    Se entiende?

    Gracias de ante mano!

  7. Hola natali, gracias por la rta. mira la idea es que las opciones sean empresa y universidad y que segun cual de las dos seleccione muestre una div determinada.No que esconda una o la muestre
    Traducido:

    Si selecciona empresa se muestra el div para empresa, y si selecciona universidad se muestra el div para universidad, obviamente cuando selecciono una esconde la otra

    Tambien deberia pasar el dato de universidad o empresa como valor a la base de datos.

    Se entiende?

    Mis conocimientos de JS se limitan a modificar de oido lo que hacen otros, tengo la logica quizas, pero no la capacidad para escribir como corresponde la funcion para hacer esto.

    Saludos!

  8. Hola! lo he probado y funciona de pelos! pero he aqui la cuestion toy usando un formulario que utiliza el niceforms 2.0 (que es como un template para formularios) el tiene un archivo niceforms-default.css y niceforms.js. Cuando aplico este «template» al form me deja de funcionar lo de ocultar/mostrar los campos. hasta aciendo pruebitas he descubierto que el niceforms.js es el que causa el problema.
    A todo esto la pregunta es: HAY OTRA FORMA DE OCULTAR/MOSTRAR los campos????

  9. Hola,
    he provado tu codigo pero hay algo que no me funciona bien.

    muestro el contenido del radio button1: nombre, apellido, bla bla..
    luego seleciono el radio button 2 y me sale el contenido de 1 y abajo el del radio button2 y mal estrucutrado ya que lo tengo todo en tablas.

    La info del radiobutton 1 nunca se me oculta:

    function mostrarReferencia(){
    if (document.myForm.TarjSecun.checked == true) {
    document.getElementById(‘Prin’).style.display=’none’;
    document.getElementById(‘Sec’).style.display=»;
    } else {
    document.getElementById(‘Sec’).style.display=’none’;
    document.getElementById(‘Prin’).style.display=»;
    }
    }

    ¿Se os ocurre porque me pasa esto?

  10. Hola, me gustaria saber si me pueden ayudar en lo siguiente:

    Bueno lo que yo necesito es obtener de un algun valor que tengo en la base de datos y asignarle un valor a un campo de texto
    y pues la verdad no tengo idea como es, no se si es con JavaScript o php puede hacer eso…

    Espero que me puedan Ayudar!!!
    Gracias.

  11. gracias por el codigo.,… ahora mi pregunta es… como puedo aplicarlo en un list menu…. es decir en el caso de estados… en donde si un estado no se encuentra registrado pueda llenar los campos y enviarlo a la base de datos

  12. sera q me puedes ayudar con alguna codificacion de referencia algo sobre calificaciones
    la cual tiene relaciones de materias, alumnos, cursos y profesores
    el cual debe mostrar el listado de alumnos pero segun se escoja el curso y la materia con el trimeste
    y poder aceptar las notas respectivas ha cada estudiante
    si puedes dar una manito en eso
    gracias :D

  13. Hola que tal oye puedes ayudarme… tengo una lista de desplegable con 4 opciones: Promedio, Tesis, Examen y Otro..

    Bueno el caso es que cuando elija la opción Tesis quiero que me aparezca la fila que oculte:

    contenido de la fila oculta:
    Nombre tesis: (Aquí esta el campo de texto)

    y así mismo con la opción Otro.

    El ejemplo que pusiste me ayuda a saber con mostrar las filas… pero lo que quiero es ligar el evento a la lista de opciones para que al seleccionar la opción me habilite la fila….. De antemano Gracias que estes bien…

    Regards…

  14. disculpa amiga y en caso de que sea por selección, tengo 3 opciones una es bolsa de trabajo
    capacitación y desarrollo
    y la otra selección de personal
    quiero que se muestre cuando seleccionen capacitación y desarrollo.
    te agradeceré mucho puedas ayudarme..

  15. si tengo una lista como llamo a cada opcion de la lista en el if

    lista.

     —- Seleccionar —- 
    Panamá
    Bocas del Toro
    Chiriquí
    Coclé
    Colón
    Darién
    Herrera
    Los Santos
    Veraguas
    Comarca San Blasa

    como hago para condicionar

    if (document.ubicacion.field[country].checked == true)

    que debo colocar en vez de check o como debo colocar si quiero que cuando selecciones la primera opcion me aprazca algo.

    gracias

  16. Am bueno gracias por el codigo esta muy bueno funciona bien solo tengo una duda am por ejemplo si yo lo kiero manejar con una lista desplegable la opcion de checked == true seguiria funcionando o la tengo k kambiar es k soy nuevo en javascript

  17. muy bueno el codigo solo q tengo un problema al momento de mandar los datos a la bd en caso de q se selecione un campo del select diferente de otros como es mi ejemplo manda el valor vacio es decir que esta tomando el del campo oculto como soluciono este problema espero me puedas ayudar gracias por adelantado

  18. Tengo una duda, quizás sea algo tonta, pero ¿cómo reemplazo los inputs radio por un select? y al elegir cierta opción cumpla la misma función que la publicada. PD: Excelente blog!

  19. Y si tengo mun boton submit?
    asi:

    function mostrar() {
    document.getElementById(‘retiro’).style.display = ‘block’;
    }

    y quiero mostrar esto despues de una consulta

    Retirar Estudiante*

    Si
    No

    PORQUE NO ME LO MUESTRA CON EL SUBMIT Y CON UN BOTON NORMAL SI?

  20. Y si tengo mun boton submit?
    asi:

    function mostrar() {
    document.getElementById(‘retiro’).style.display = ‘block’;
    }

    y quiero mostrar esto despues de una consulta

    —-esta parte son dos radio button con div id=retiro style=display:none osea estan ocultos
    –td– align=»right»–Retirar Estudiante*–/td—-
    –td–
    –div id=retiro style=display: none–
    –input type=radio id=»retiro» name=»retiro» value=»1″–
    Si
    –input type=»radio» id=»retiro» name=»retiro» value=»0″–
    No
    –/div–
    –/td–
    ——–
    PORQUE NO ME LO MUESTRA CON EL SUBMIT Y CON UN BOTON NORMAL SI?

  21. PERDON ME FALTO EL BOTN DE BUSCAR

    –input type=»button» name=»btn1″ value=»Buscar» id=»show» onclick=»mostrar()»–

  22. Amigo gracias por el codigo, me funciono con html. Estoy intentado usarlo dentro de un lightbox, pero no funciona correctamente, es decir el div no se oculta. Gracias

  23. Hola tengo un problema puesto eh creado la funcion y la eh colocado dentro del head y eh mandado ha llamarla como el el ejemplo pero no m funciona …sale como si la funcion no ha sido definida

  24. ¡Hola!

    Súper la info, me ha sido de mucha utilidad ahora que estoy iniciando con JS… Pero, al intentar ajustarlo a lo que necesito, serían muchos los campos que quiero ocultar/mostrar. ¿Esto también aplica para formularios completos?

    Agradezco tu respuesta… ¡Saludos!

    PS. También agradezco la buena ortografía. :D

  25. Hola, tengo un formulario en el que se muestran o no unos campos en función del valor de otro. Tengo esta función:
    function muestra(campo){
    switch(campo){
    case 1:
    document.getElementById(«f1″).style.display=»inline»;
    document.getElementById(«s1″).style.display=»inline»;
    document.getElementById(«p1″).style.display=»inline»;
    document.getElementById(«f2″).style.display=»none»;
    document.getElementById(«s2″).style.display=»none»;
    document.getElementById(«p2″).style.display=»none»;

    Me funciona correctamente pero lo que necesito saber es como poner los campos obligatorios (required) en el caso de que se muestren. Por ejemplo, en la función que os pongo arriba el campo «f1» se muestra por que es «case 1». Bien, entonces lo que necesito es que en este caso este campo «f1» sea obligatorio. No lo puedo poner siempre porque si lo hago será obligatorio se muestre o no se muestre y eso no puede ser.

    El formulario está aquí: http://www.yccseguros.es/contactodece.html

    Saludos.

  26. NNatali..: _»Buenos Días, muy buena la pagina web y tu código excelente, sencillo y fácil de entender, y si me funciono pero ahora tengo un problema que no he logrado adaptarlo para lo que requiero hacer; que es ocultar el formulario para que luego me aparezca pero no con un radio de selección, como tu ejemplo, sino para un button = Consultar, el cual a través de un $sql me realice la búsqueda del dato ingresado como el numero de Cédula de Identidad, y si existe me muestre el formulario con los datos previamente registrado en mi Base de datos (phpmyadmin) y sino existe que me muestre el formulario en blanco para ser llenado y guardado (con mi button = guardar)».
    _ Estoy codeando con php y html, principalmente.
    _si es necesario que te envié el código por e-mail, por fa dame una dirección de correo.

    AGRADECIDO POR TU DISPOSICIÓN Y AYUDA A MI SOLICITUD…

    Desde: Venezuela – Barinas…

  27. Hola gracias por el tutorial.

    Me gustaría poder integrarlo a otro formulario cuyo action ejecuta procesar.php
    ¿Se puede hacer?
    ¿Hay forma de hacerlo?

    Gracias

  28. Sos una genia!! Muchas gracias por tu ayuda. También soy mujer y estoy por terminar de cursar mi carrera de desarrollo de software, me encanta ver como hay otras mujeres!! Graciaasss!! Lo mejor para vos! :) besitos

Deja un comentario

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