Ya parezco revista semanal (por que solo posteo una vez a la semana). Pero como siempre intento mostrar cosas útiles, para que no batallen como yo buscando información.

Casi siempre es necesario ocultarle cosas al usuario por “X” razón, y esto parece muy complejo en ambiente web (por que no encontramos algo como en Visual Basic -modificando solo la propiedad visible=”false”), pero JavaScript nos facilitara esta tarea

¡Vallamos al grano!

Escenario: Tenemos que hacer un formulario en el cual guardaremos los clientes de una empresa, pero resulta ser que nuestros clientes pueden ser personas físicas(Una persona cualquiera) o personas morales (Empresas *grupo de personas), entonces dependiendo de lo que sean, tendremos que almacenar diferentes datos:

Personas Físicas:

-Apellido Paterno

-Apellido Materno

-Nombre(s)

Personas Morales:

-Razón Social (nombre de la empresa)

Como podemos ver, si un cliente es una persona física tendremos que mostrar los campos para introducir Apellido Paterno, Apellido Materno y Nombre(s), al mismo tiempo ocultar el campo de Razón Social, pero si un cliente es persona moral tendremos que mostrar el campo Razón Social y ocultar los campos Apellido Paterno, Apellido Materno y Nombre(s).

Para solucionar esto basta con poner un Grupo de opción (radio buttons) , para que cuando elijan el tipo de persona el script realice la acción de ocultar o mostrar dichos campos.

image

El código es muy fácil :

   1: <html>
   2: <head>
   3: <title>Muestra y oculta div</title>
   4:
   5: <script language="JavaScript">
   6:
   7: function oculta(id){
   8:      var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
   9:      elDiv.style.display='none'; //damos un atributo display:none que oculta el div     
  10:     }
  11:
  12: function muestra(id){
  13:      var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
  14:      elDiv.style.display='block';//damos un atributo display:block que  el div     
  15:     }
  16:
  17:
  18: window.onload = function(){/*hace que se cargue la función */
  19: /* "Mandamos como parametro el nombre de la Div para ocultar" */
  20: oculta('Pmoral'); /*Ocultamos Pmoral*/
  21: }
  22: </script>
  23:
  24: </head>
  25:
  26: <body>
  27:
  28: <!--Al hacer llamado de la función solo tienes que idicar el nombre del DIV entre parentesis-->
  29: <p>
  30:   <label>
  31:    <input type="radio" name="pers_cte" value="Fisica"  id="per_0" onClick="muestra('Pfisica'); oculta('Pmoral')" checked > <!-- Al cambiar "onClick" el valor del radio llamamos la funcion ocultando los campos de Pfisica y mostrando Pmoral-->
  32:     Fisica</label>
  33:   <br>
  34:   <label>
  35:    <input type="radio" name="pers_cte" value="Moral" id="per_1" onClick="muestra('Pmoral'); oculta('Pfisica')">
  36:     Moral</label>
  37:   <br>
  38: </p>
  39:
  40: <div id="Pfisica">
  41: <p>Este contenido es para persona Fisica</p>  <!--Div para ocultar o mostrar de Persona Fisica -->
  42: </div>
  43:
  44: <div id="Pmoral">
  45: <p>Este contenido es para persona Moral</p>   <!--Div para ocultar o mostrar de Persona moral -->
  46: </div>
  47: </body>
  48: </html>

*El código esta comentado =) para que no se espanten.

Demo[Espera a que cargué por completo la pagina]

Download Código

[Si, si lo se hay mucho código en internet que nos ayuda con esto, pero creo yo que este es muy fácil, sencillo y pequeño]

Inspirado| http://blogandweb.com/javascript/ocultar-o-mostrar-un-div-con-javascript/

Anuncios

Comentarios en: "Mostrar y ocultar elementos con JavaScript" (13)

  1. Gracias tu script me ha ayudado mucho!
    y como dices es sencillito de entenderle!

  2. Despues de buscar tanto encontre lo que necesitaba!
    Gracias por tu aporte, muy util y me ha servido de mucho!!

  3. Disculpa como podria hacer esto pero utilizando un campo select.
    De antemanpo te agradesco dado que me sirvio.

  4. Hola, pero como hago para que no me inserte un br….tengo un panel algo asi:
    |__combo___|\/|| |__text1___| – |__text2__|(texto)

    quiero q cuando el combo cambie muestre o no el guion “-“, el text2 y el texto acontinuacion…pongo todo esto en un label, o span o div, pero cuando lo muestra, esto sale en la linea inferior…como si agregara un br o algo asi….

    utilizo lo recomendado en el foro:
    document.getElementById(“label1″).sytle.display=”none”;
    document.getElementById(“label1″).sytle.display=”block”;

  5. Gracias por el código!! muy fácil de entender!

  6. Willis

    Gracias por el aporte, es muy sencillo y justo lo que buscaba, espero que se mantenga por que es de mucha utilidad

  7. Avalos22 dijo:

    Muy bueno funciona Perfecto!

  8. perfecto muchas gracias!

  9. Juvenal jardim dijo:

    gracias men necesitaba algo parecido

  10. Anghelo dijo:

    Pruebo este codigo en Google Chrome y no funciona, alguna recomendación?

  11. hola, como hago para que el radio button sea preseleccionado y que cuando entremos a la página algun radio button este activo por default y corriendo la función de javascript ??

  12. Como hago para habilidad o deshabilitar
    Un campo dependiendo de una variable
    Es decir, if ($x >= 35;){ deshabilita}
    else {habilita}

  13. hola buen día, excelente trabajo, me ayudo mucho , gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Nube de etiquetas

A %d blogueros les gusta esto: