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.
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]
[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/
Yoshi se come un DOMO KUN
Comentarios recientes