Mostrar mensaje de datos siendo procesados al hacer clic sobre el botón submit

[Mizuki]

Hola a todos, he estado leyendo varias de las respuesta en este foro, y muchas de ellas me han sido de gran ayuda, es por ello que me anime a preguntarles lo siguiente:

Resulta que deseo mostrar al usuario el mensaje de que su información esta siendo procesada y que por favor espere, al momento de hacer click sobre el botón submit.
Disculpen si me pregunta resulta muy tonta, pero como se habrán dado cuenta estoy dando mis primeros pasos en este mundo.
Les agradezco de antemano cualquer ayuda que me puedan brindar.
Espero haberme dado a entender lo mejor posible.

Un saludo a todos.

[monoswim]

Hola, antes que nada BIENVENIDO A LOS FOROS !!!!

Ahora bien, suponete que tenemos un formulario con el nombre formul y un botón con type="button" y name="enviar"

entonces puedes hacer una función js que mande el formulario y que coloque el mensaje en el mismo botón y lo inhabilite a que vuelva a ser clickeado...

Código:

<script>
function check(){
    document.formul.enviar.value = "Procesando Formulario";
    document.formul.enviar.disabled = true;
    document.formul.submit();
}
</script>
<!---Y en el HTML----->
<form name="formul" action="script.cgi">
<input name="enviar" type="button" onclick="check()" value="Clickeamo">
</form>

Fijate que desde el form llamo a esa función cuando se clickea el botón...

Era eso lo que buscabas ? también puedes mandar mensajes de alerta diciendo que se envió el formulario y esas cosas...Modificando la función de js...

Espero que te sirva
Saludos

[caricatos]

Hola Mizuki, bienvenido a los foros :

También puedes usar directamente el evento onsubmit del mismo tag form:

<form name="formul" action="script.cgi" onsubmit="mostrarMensaje()">
...
</form>

La forma de mostrar el mensaje puede hacerse de muchas maneras... abrir un popup centrado es otra (en las Faqs hay buena información).

Saludos

[Mizuki]

Hola, muchisiiimass gracias por responder, ahora mi duda es la siguiente, en caso de que desee que el mensaje de que esta siendo procesada la información, aparezca en la misma pantalla del formulario, es decir, que al hacer submit, desaparezca el formulario y sólo aparezca en pantalla el mensaje de que la información esta siendo procesada y no en el botón o en pantalla emergente.

Espero haberme dado a entender, y de nueva cuenta les agradezco por sus respuestas, son de gran ayuda.

[caricatos]

Hola otra vez:

Solo tienes que tener una capa oculta usando estilos, y cambiar el estilo al formulario para ocultarlo...

<div id=oculto style="display: none" >
Procesando Formulario
</div>
<form name="formul" action="script.cgi" onsubmit="mostrarMensaje()">
...
</form>

y en la función mostrarMensaje...

function mostrarMensaje() {
//...
document.forms["formul"].style.display = "none";
document.getElementById("oculto").style.display = "block";
//...
}

Saludos

[Mizuki]

Hola

Muchisimaaaas graciaaaas por responder de nueva cuenta.
Son de gran utilidad sus respuestas.

Un saludo para todos: Konnichiwa.

[semadlag]

Hola MonoSwim :

Muy buena tu solucion. Me ha ayudado a sacar un gran problema que tenia pues yo enlazo el formulario a un programa PHP que envia emails a 250 usuarios y los genera tomando sus datos desde una BBDD, y los visitantes al sitio web clickeaban varias veces pensando que no se habia enviado la informacion. Ahora me funciona perfecto.
La consulta del millon de dolares:
En lugar de cambiar el texto al boton de envío, ¿ Como se puede mostrar una barra de progreso con algun texto ?

Gracias
Semadlag

[Santiago Cortes]

Yo encontre uno en una pagina web que encontre por aya espero que te pueda ayudar para que lo cheques:

/////////////////////////////////////////

var loadedcolor='orange' ;
var unloadedcolor='#F0F0F0';
var bordercolor='#000000';
var barheight=13;
var barwidth=440;
var waitTime=12;

var action=function()
{
redireccionar()
window.status="Enlace activado, muchas gracias por su paciencia ...";
}

var clickBar=function(){
redireccionar()
window.status="Enlace activado, muchas gracias por su paciencia ...";
}

function redireccionar(){
location.href=pagina
}

var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
var blocksize=(barwidth-2)/waitTime/10;
var loaded=0;
var PBouter;
var PBdone;
var PBbckgnd;
var Pid=0;
var txt='';
if(ns4){
txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';
txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'" onmouseup="clickBar()">';
txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';
txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';
txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';
txt+='</ilayer>';
txt+='</td></tr></table>';
}else{
txt+='<div id="PBouter" onmouseup="clickBar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';
txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;"></div>';
txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;"></div>';
txt+='</div>';
}

document.write(txt);

function incrCount(){
window.status="Activando enlace de descarga, por favor espere ...";
loaded++;
if(loaded<0)loaded=0;
if(loaded>=waitTime*10){
clearInterval(Pid);
loaded=waitTime*10;
setTimeout('action()',100);
}
resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);
}

function hidebar(){
clearInterval(Pid);
if(ns4)PBouter.visibility="hide";
else PBouter.style.visibility="hidden";
}

function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}

function progressBarInit(){
PBouter=(ns4)?findlayer('PBouter',document):(ie4)? document.all['PBouter']:document.getElementById('PBouter');
PBdone=(ns4)?PBouter.document.layers['PBdone']:(ie4)?document.all['PBdone']:document.getElementById('PBdone');
resizeEl(PBdone,0,0,barheight-2,0);
if(ns4)PBouter.visibility="show";
else PBouter.style.visibility="visible";
Pid=setInterval('incrCount()',95);
}

function resizeEl(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r+'px';
}

window.onload=progressBarInit;
/////////////////////////////////////////

Esto lo pones en un archivo aparte con exteción .JS

Lo demas es lo siguiente:

<SCRIPT language=JavaScript>var pagina="D_EHS_bis.htm"</SCRIPT>
<SCRIPT language=javascript
src="D_EHS_archivos/barraprogreso.js"></SCRIPT>

Es asi com lo vi checa esta pagina: http://hispanicoweb.net/

[semadlag]

Gracias por tu respuesta. Haré una prueba ya que esto lo necesito para presentar en la pantalla mientras se genera una actualizacion a la base de datos en MySql.
Tengo document.form.submit(); en la validacion del formulario que hace la llamada al programa en php para actualizar.
La duda que tengo es como lo incorporo antes de hacer la submision del formulario .

Me puedes guiar... pues de Java y Javascript es poco lo que entiendo..
He trabajado mas con PHP y Perl.

Gracias

[miguellara]

Buenas, estube leyendo este tema, y quiero comentarles esta duda, a ver si alguien me puede ayudar.
Antes les cuento que yo programo en php, pero me pidieron este trabajito en javascript y tengo que ver como lo resuelvo!

Necesito hacer una validación de un formulario, sencilla, que me aparesca un pop-up avisando que campos obligatorios faltan. Para esto uso un comportamiento del dreamweaver.

El problema surge de que el servidor tarda mucho en cargar los archivos adjuntos que elije el usuario en el formulario, y para que no crea que no se está procesando la información enviada, y comienze a clickear varias veces el botón de envío necesito:
1- Validar el form
si está validado, y los campos rellenos correctamente :
2- Que me desactive el boton "Enviar"
3- Que se abra un alert con el texto "estamos procesando, esto puede durar varios segundos"


Se agradece cualquier dato!

Miguel.