•»Microsoft Developers ►Tutoriales

Mostrar y ocultar elementos con JavaScript

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/

13 comentarios

  1. 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”;

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. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: