poner cargando al enviar formulario

sciutomaxi · #1 (**permalink**) 22/05/2008, 17:29

Hola gente la verdad que no se si esta pregunta va aca, les cuento tengo un formulario donde el usuario ingresa datos y sube fotos pero que pasa aveces las fotos son pesadas y la pagina se queda cargando al enviar el submit lo quiero es poner poner una imagen que ya la tengo loading.gif que se muestre mientras se esta subiendo los datos.
Lo debo hacer con el onsubmit pero no he logrado hacerlo funcionar.
Como debo hacer

KarlanKas · #2 (**permalink**) 23/05/2008, 04:30

Crea una capa que contenga la imagen. Esta capa debe estar oculta. Y haces un onclick en el botón submit para que lo muestre. Un ejemplo:

Código:

<html>
<head>
<title>Untitled</title>
<style>
#loading_oculto{
z-index:99;
position:absolute;
top:50%;
left:50%;
margin-left:-117px;
margin-top:-117px;
visibility:hidden;
}

</style>
</head>

<body>
<form action="" id="ss" name="ss" method="post">
Nombre:<input type="text" name="e" /><br />
Apellidos:<input type="text" name="ww" />
<input type="submit" name="eeeee" value="Enviar" onclick="document.getElementById('loading_oculto').style.visibility='visible';" />
</form>
<div id="loading_oculto"><img src="http://www.howautowork.com/list_of_contets/part_1/ch_1/images/loading.gif" /></div>

</body>
</html>

En el ejemplo no se ve porque no manda nada, pero online y subiendo imágenes si sale la imagen.

Un saludo

sciutomaxi · #3 (**permalink**) 23/05/2008, 15:19

Cita:

Iniciado por KarlanKas

Crea una capa que contenga la imagen. Esta capa debe estar oculta. Y haces un onclick en el botón submit para que lo muestre. Un ejemplo:

Código:

<html>
<head>
<title>Untitled</title>
<style>
#loading_oculto{
z-index:99;
position:absolute;
top:50%;
left:50%;
margin-left:-117px;
margin-top:-117px;
visibility:hidden;
}

</style>
</head>

<body>
<form action="" id="ss" name="ss" method="post">
Nombre:<input type="text" name="e" /><br />
Apellidos:<input type="text" name="ww" />
<input type="submit" name="eeeee" value="Enviar" onclick="document.getElementById('loading_oculto').style.visibility='visible';" />
</form>
<div id="loading_oculto"><img src="http://www.howautowork.com/list_of_contets/part_1/ch_1/images/loading.gif" /></div>

</body>
</html>

En el ejemplo no se ve porque no manda nada, pero online y subiendo imágenes si sale la imagen.

Un saludo

Muchas gracias me re sirvio el ejemplo era justo lo que necesitaba.

KarlanKas · #4 (**permalink**) 23/05/2008, 15:39

Me alegro de que te haya servido!!