Feeds:
Entradas
Comentarios

Posts etiquetados ‘Ocultar elementos con java script’

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/

Read Full Post »

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.