Validar formulario y mostrar imagen "cargando"

AbdelioR · #1 (**permalink**) 19/10/2007, 11:01

Tengo problemas a la hora de montar este formulario.

Me gustaria que el formulario no se enviara si el campo "nombre" no esta rellanado.

En caso de estar rellenado, al clickar en "enviar" que es la imagen que valida el formulario, me gustaria que apareciera abajo una imagen de "cargando" mientras el formulario se procesa con php.

He intentado varias cosas pero no lo consigo...

¿Cual es la mejor manera para hacer esto?

Gracias.

chalchis · #2 (**permalink**) 19/10/2007, 11:19

podrias mostrar una capa que este oculta al inicio y al dar submit que aparesca esa capa o checate este articulo

http://alexsancho.name/archives/2005...e-contacto-20/

saludos

gabriel em · #3 (**permalink**) 19/10/2007, 12:22

Te paso como lo hice yo, en definitiva lo que hace es que al apretar el boton enviar y el boton se transforma en una imagen gif que dice "cargando".

Primero te posicionas al lado del boton enviar de tu formulario y pegas esto en el codigo:

Código:

<img alt="" width="35" height="35" id="imagen" style="display: none;" runat="server"/>

Tiene que aparecer un cuadrito al lado del boton.No te preocupes que ese cuadrito no se vera.....Puedes cambiar el tamaño variando width y height.

Luego al formulario el agregas una accion OnSubmit, por ejemplo:

Código:

onSubmit="return validar(this)"

que quedaria asi:

Código:

<form action="paginaalaquetienequeir.asp" method="post" name="formulario" id="formulario" onSubmit="return validar(this)">

Esto lo que hace es que cuando el usuario haga click en el boton enviar se ejecute la funcion "validar" de javascript.

Entonces entre el <head> pegas el codigo:

Código:

<script language="javascript" type="text/javascript">
function validar(frm) { 
document.getElementById("formulario").boton.style.display="none";
document.images["imagen"].style.display="inline";
setTimeout('document.images["imagen"].src="loader.gif"', 10);
}
</script>

Ahora lo que tienes que hacer es poner una imagen llamada loeader.gif en la misma carpeta que la pagina que estas modificando.
Una loader lindo es este : http://www.alquilereseuroterra.com/images/loading.gif
Recuerda que lo tienes que renombrar a loader.gif

AbdelioR · #4 (**permalink**) 19/10/2007, 14:31

Muchas gracias!

superjosal · #5 (**permalink**) 01/09/2008, 04:04

Buenas.

Lo único que no consigo comprender es por qué se necesita refrescar la imagen con setTimeout. Llevo unos días intentándolo de varias maneras, pero puse el setTimeout y funcionó a la primera!! De cualquier otra forma la imagen no aparecía!!

¿Sabéis a qué es debido?

Gracias.