Barra de progreso para Formulario.

[@padawan@]

Que tal, bueno recurro a ustedes.

Lo que necesito hacer basicamente es que al momento de hacer le submit del formulario me muestre una barra de progreso hasta que se cargue la pagina con los datos ya cargados o la pagina de "exito".

Esto es porque el formulario tiene un campo file que perimte subir una foto, entonces para mejorar la experiencia del usuario, queria incluir una simple barra de progreso.

Busque mil ejemplos y ninguno se adecua a lo que necesito, intente con Jquery, con algunos ejemplos de Ajax, pero todos son demasiado complejos para lo que necesito.
Es decir no necesito que me muestre el porcentaje de carga, ni que este sincronizado con el upload real.
Simplemente necesito que al hacer click en el boton de submit se me oscuresca el fondo (o no) y me aparesca un gif animado que puede ser la ruedita de carga o una barra de progreso, hasta que se cargue la pagina destino.
YO pense que hacer esto era muy simple, pero por los ejemplos que vi es demasiado codigo para un simple efecto.

Si alguien lo soluciono de una manera practica, facil y rapida, que me diga como, o si tienen algun tutorial o codigo de ejemplo.

Les agradesco.

[Adler]

Hola

Lo que quieres es una simulación. En un div, junto al botón submit, cargas la imagen.

<form action="" method="" onsubmit="document.getElementById('elDiv').innerHT ML = imagen">

Suerte

[@padawan@]

Iniciado por Adler

Hola

Lo que quieres es una simulación. En un div, junto al botón submit, cargas la imagen.

Suerte

Muchas gracias, lo voy a probar y te digo.

[@padawan@]

Iniciado por Adler

Hola

Lo que quieres es una simulación. En un div, junto al botón submit, cargas la imagen.

Suerte

Sabes, o sere muy ignorante en el tema este o no se.

Pero ahora que lo pruebo si yo pongo .InnerHTML y la ruta de la imagen, lo que hace es escribirme el nombre de la imagen en el DIV, como hago para que me cargue la imagen?

[Adler]

Hola

No hay que escribir la ruta, sino todo el tag

<img src='image.gif' ....... />

Suerte

[@padawan@]

Iniciado por Adler

Hola

No hay que escribir la ruta, sino todo el tag

Suerte

justo lo estaba pensando , confieso mi torpeza.

Muchas gracias.

[@padawan@]

Tengo este codigo:

Código HTML:

<form action="Destino.php" method="post" enctype="multipart/form-data" onsubmit="document.getElementById('elDiv').innerHTML = '<img src=images/mozilla_blu.gif>'"> 

Tengo el div:

Código HTML:

<div id="elDiv"></div> 

pero no funciona, no se carga la imagen, ahora si dejo un texto cualquier si se muestra en el div.

Si pongo la imagen fija en el html tambien se ve, asi que la etiqueta img tampoco es.

Lo probe en varios exploradores y no funciona tampoco.

Que raro no? deberia funcionar.

[_cronos2]

Los atributos de las etiquetas HTML deben llevar comillas, osea que con que pongas comillas al src bastará.
Saludos (:

[@padawan@]

Iniciado por _cronos2

Los atributos de las etiquetas HTML deben llevar comillas, osea que con que pongas comillas al src bastará.
Saludos (:

probe con comillas dobles y comillas simples, y no funca, estoy desconcertado.

[CHuLoSoY]

Hazlo con una función

Código Javascript:

function barra() {
 
    document.getElementById("elDiv").innerHTML="<img src='images/mozilla_blu.gif' alt=''>";
 
}
 

Código HTML:

<form onsubmit="barra();">
 

[_cronos2]

Esque al haber ya comillas simples y dobles tienes que usar carácteres de escape... :

Código HTML:

<form action="Destino.php" method="post" enctype="multipart/form-data" onsubmit="document.getElementById('elDiv').innerHTML = '<img src=\"images/mozilla_blu.gif\" />'">
 

... o bien como te indica @CHuLoSoY
Saludos (:

[Adler]

Hola

Es como te dice @_cronos2 pero en este caso no puedes escapar las comillas dobles, han de ser las simples

<form action="Destino.php" method="post" enctype="multipart/form-data" onsubmit="document.getElementById('elDiv').innerHT ML = '<img src=\'images/mozilla_blu.gif\' />'">

Suerte

[_cronos2]

Toda la razón Adler :)

[@padawan@]

ok Muchas gracias, ahora lo pruebo.

[@padawan@]

Muy raro, hice la funcion y la llame en el onsubmit del form, pero sigue sin funcionar.

Realmente muy raro, no se que puede ser.

Necesitaria encontrar ejemplos de archivos que funcionen, a ver que cosa mal estare haciendo, pero no se que puede ser, ya que estoy probando simplemente eso, es decir un form y nada mas. y no funciona. Si en vez de poner la etiqueta de la imagen pongo un texto cualquiera funciona, por lo tanto el InnerHTML funciona, pero no se porque no se carga la imagen.

[Adler]

Hola

No podemos averiguar cual es el problema sin ver el que tienes hecho. En teoría tu formulario ha de ser algo como esto

<form action="Destino.php" method="post" enctype="multipart/form-data" onsubmit="document.getElementById('elDiv').innerHT ML = '<img src=\'images/mozilla_blu.gif\' />'">
// Aquí los campos
<input type="submit" value="enviar" />
</form>

Suerte