Mostrar y ocultar DIVs
Escrito por Mauro Rondinelli el Viernes 15 de Febrero de 2008 a las 14:22hs
Muchas veces para mejorar la interfase de nuestro web site es necesario darle algo de interactividad, a continuaci?n vamos a ver varios ejemplos aplicados a formularios donde mostrar y ocultar divs (capas) hace que nuestro sitio web sea mas intuitivo.
Primer Caso: Mostrar y ocultar un div al hacer click en un input radio (radio button)
Supongamos que tenemos un formulario donde el usuario,?SOLO si es mujer, debe completar su apellido de casada...
Masculino Femenino
Si el sexo es Masculino ?hace falta mostrarle el campo 'Apellido Soltera'? La respuesta es no, lo mejor que podemos hacer es ocultar ese campo cuando el genero es Masculino y mostrarlo cuando es Femenino, veamos el ejemplo...
Masculino Femenino
Como hacemos esto? Primero creamos el formulario...
En el c?digo anterior debemos destacar el atributo onclick de los radio buttons (input radio) que indican el sexo...
onclick="toggle_apellido_soltera(this)"
Lo que hace este atributo es llamar a la funci?n toggle_apellido_soltera() pasandole como parametro el objeto radio que fue clickeado ("this"), la funci?n toggle_apellido_soltera() es la encargada de mostrar / ocultar el DIV que contiene el campo "Apellido Soltera" , veamos el c?digo de dicha funci?n...
B?sicamente lo que hace esta funci?n es chequear con un IF el valor del ratio "clickeado" si es "m" (masculino) oculta el DIV...
document.getElementById("div_apellido_soltera").style.display = "none";
De lo contrario lo muestra...
document.getElementById("div_apellido_soltera").style.display = "block";
Aclaremos que el bloque de contenido que queres mostrar / ocultar esta contenido dentro de un DIV ("div_apellido_soltera") que por defecto aparece oculto...
style="display:none"
Segundo Caso: Mostrar u ocultar un DIV seg?n el ?tem elegido en un select
Este caso es similar al anterior salvo que el mostrar u ocultar el DIV depende del item seleccionado en un select, veamos el formulario...
Veamos el codigo para armar el formulario...
En este caso llamamos a la funci?n que hace el toggle (mostrar / ocultar) en el atributo onchange de elemento ocupaci?n, veamos esta funci?n...
function toggle_ocupacion(elemento) {
if(elemento.value==0) {
???document.getElementById("span_otra_ocupacion").style.display = "inline";
} else {
???document.getElementById("span_otra_ocupacion").style.display = "none";
}
}
El IF eval?a que elemento seleccionado sea el 0 ("Otro")...
elemento.value==0
Si esta condici?n se cumple se muestra el bloque que contiene el campo para ingresar la otra profesi?n...
document.getElementById("span_otra_ocupacion").style.display = "inline";
De lo contrario se oculta.
comentarios
-
Hola!
Muy bueno el contenido de PHP que enseñan.
Anteriormente leí el de editar, abrir, leer, etc un archivo (no comprendí bien su utilidad o en qué caso lo usamos, pero lo voy a poner en práctica para comprenderlo).
En este articulo utilizan y no. Cual es su ventaja y desventaja?
Muchas gracias. Muy bueno todo!
Abrazos... Emiliano -
Aldo Enrique:
Que pasa con los campos si primero se les teclea un valor y despues se ocultan?.
Supongo que de igual forma se envian como el resto de los campos. -
Extamente se envia igual, tenes dos opciones o lo filtras del lado del servidor mediante ASP, PHP osea si "sexo" es "m" no hace flta que guardes el valor del campo "apellido_soltera" o sino borras el contenido del campo desde la misma funcion javascript...
function toggle_apellido_soltera(elemento) {
//esta linea borra el valor del campo
document.getElementById("apellido_soltera").value = "";
if(elemento.value=="m") {
document.getElementById("div_apellido_soltera").style.display = "none";
} else {
document.getElementById("div_apellido_soltera").style.display = "block";
}
Saludos. -
Gracias por la informacion siemp`re es de utilidad espero que sigan con esto yo soy novato en esto pero me gusta mucho y mas saber que se puede contar con personas como ustedes que nos pueden ayudar
gracias -
recien empiezo con php hace mucho que no programaba y me ayudo mucho tu articulo muy bueno
-
Excelente, estaba buscando esto desde hace varios dias, es justo lo que necesito y en ningun sitio lo habia logrado encontrar. Muchas Gracias.
-
que pasa si tengo mas de 2 opciones
10 por ejemplo
y que cada uno me abra un contenido diferente
saludos
