Ocultar formulario javascript

errotiko · #1 (**permalink**) 12/01/2010, 12:36

Hola,

Tengo un <div> y en el interior un formulario compuesto por 4 <input> de texto, dicho <div> pretendo ocultarlo cuando se hace click fuera del mismo, en cualquier lugar de la página excepto dentro del <div> donde se encuentra el formulario.
Si la función de ocultar la maneja el evento onclick de <body> o de <html>, al hacer click en cualquier lugar de la página el <div> con el formulario desaparece, el problema es que si hago clik dentro del mismo formulario, logicamente también desaparece.

Estoy atascado, haber si alguien puede ayudarme con este problema.

Saludos y gracias.

atoBeto · #2 (**permalink**) 12/01/2010, 14:00

Puedes realizar una comprobación de qué objeto es el que está generando el evento onclick exactamente, y no ocultarlo cuando el evento venga del formulario. ¿No podrías mostrar el código javascript?

sergiop21 · #3 (**permalink**) 12/01/2010, 14:01

pudes mostrar la funcion que colocas dentro del onclick, osea cuando vos haces click sobre, eso va a una funcion en head bien,
para ocultar algo debe colocar lo siguiente:

document.getElementById('nombre_a_ocultar).style.d isplay = 'none';

atoBeto · #4 (**permalink**) 12/01/2010, 14:28

La solución más simple que se me ocurre es que no hagas la comprobación desde el el nivel del body o el html de la página, sino a nivel de los div que tenga el cuerpo de esta página, es decir en cada div coloca la comprobación de si se hizo click sobre él y en el div que contenga al formulario omite ocultarlo. Es decir algo como esto:

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba 1</title>
<script type="text/javascript">
function comprueba(objOrigen) {
    document.getElementById("divPanel").style.display = "none";
}
</script>
</head>
 
<body>
<div onclick="comprueba(this)">Comentario</div>
<div id="divPanel">
<form>
Texto: <input type="text" name="Texto" /> <input type="button" name="Boton" value="OK" />
</form>
</div>
<div onclick="comprueba(this)">Otro comentario</div>
</body>
</html>

errotiko · #5 (**permalink**) 12/01/2010, 15:53

<input id="initcoment" onfocus="comentInitHide();" type="text" value="escribe tu comentario"/>
<div id="formulario">
<input id="nombre" type="text" />
<input id="email" type="text" />
<input id="contenido" type="text" />
<input type="button"/>
</div>

//funcion para ocultar initcoment, mostrar el formulario y poner el foco en contenido
comentInitHide: function() {
var input = this.$("initcoment");
input.style.display = "none";
var comform = this.$("formulario");
comform.style.display = "inline";
var txtcontent = this.$("contenido");
txtcontent.focus();
}
,

//ahora una vez mostrado el formulario, si el usuario hace clic fuera del formulario, este deberia esconderse y mostrar de nuevo initcoment:

comentFormHide: function() {
var txtcontent = this.$("contenido");
txtcontent .style.display = "none";
var input = this.$("initcoment");
input.style.display = "inline";

}
,

//el problema es que no se donde colocar esta función, ya que si la pongo en el evento onclick de body por ejemplo, cuando hago clic en <input id="nombre" type="text" />
por ejemplo, ocultaria el formulario.

errotiko · #6 (**permalink**) 12/01/2010, 16:09

entiendo atoBeto, gracias

errotiko · #7 (**permalink**) 12/01/2010, 16:15

el problema es que los paneles no ocupan todo el ancho del navegador(según la pantalla), entonces ambos laterales pertenecen a <html>

ceSharp · #8 (**permalink**) 13/01/2010, 03:12

hola errotiko,

te comento otra posible solución, a ver que te parece.
Creas una variable global llamada dentroFuera (por ejemplo). Esta variable debe ser cero cuando el raton está fuera del div y es uno cuando el ratón esta dentro del div (con onmouseover y onmouseout)
en el body creas el evento onclick pero que pregunte por el estado de la variable dentroFuera. Si es cero que oculte el div, si es uno que no lo oculte.
De esta manera se oculta si haces click fuera del div pero no se oculta cuando haces click dentro:
--------------------------------------------
<script type="text/javascript">
var dentroFuera = 0;
function ocultarDiv()
{
if(dentroFuera == 0)
document.getElementById('el_div').style.display='n one';

}
</script>
------------------------------------------------
<body onclick="ocultarDiv();">
<div onmouseover="dentroFuera=1;" onmouseout="dentroFuera=0;" id="el_div">
.....
</div>
------------------------------------------------

salu2

errotiko · #9 (**permalink**) 13/01/2010, 04:59

gracias ceSharp me parece una excelente solución, lo pruebo y te comento.

atoBeto · #10 (**permalink**) 14/01/2010, 09:13

Buena solución también :)