Barra progreso simulada

[eurodoblon]

Buenas tardes:
Tengo un formulario con una barra de progreso simulada (no necesito mas), pero sale siempre.
Hay alguna manera de que sólo salga cuando dan al submit.
Este es el script:

Código PHP:

  <script language="javascript" src="xp_progress.js">  </script> 
<table width="100%"> 
  <tr> 
    <td><script type="text/javascript">  var bar=createBar(150,15,"white",1,"black","#333366",85,7,3,"");</script></td> 
  </tr> 
</table>  
  

Y en el boton sbmit tengo

Código PHP:

  <table width="100%"> 
  <tr> 
    <td><script type="text/javascript">  var bar=createBar(150,15,"white",1,"black","#333366",85,7,3,"");</script></td> 
  </tr> 
</table>  
  

Os dejo tambien el js

Código PHP:

  var w3c=(document.getElementById)?true:false; 
var ie=(document.all)?true:false; 
var N=-1; 
 
function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,count,action){ 
if(ie||w3c){ 
var t='<div id="_xpbar'+(++N)+'" style="visibility:visible; position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px; background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px; border-style:solid; font-size:1px;">'; 
t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute; font-size:1px">'; 
for(i=0;i<blocks;i++){ 
t+='<span style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; ' 
t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100); 
t+='"></span>'; 
} 
t+='</span></div>'; 
document.write(t); 
var bA=(ie)?document.all['blocks'+N]:document.getElementById('blocks'+N); 
bA.bar=(ie)?document.all['_xpbar'+N]:document.getElementById('_xpbar'+N); 
bA.blocks=blocks; 
bA.N=N; 
bA.w=w; 
bA.h=h; 
bA.speed=speed; 
bA.ctr=0; 
bA.count=count; 
bA.action=action; 
bA.togglePause=togglePause; 
bA.showBar=function(){ 
this.bar.style.visibility="visible"; 
} 
bA.hideBar=function(){ 
this.bar.style.visibility="hidden"; 
} 
bA.tid=setInterval('startBar('+N+')',speed); 
return bA; 
}} 
 
function startBar(bn){ 
var t=(ie)?document.all['blocks'+bn]:document.getElementById('blocks'+bn); 
if(parseInt(t.style.left)+t.h+1-(t.blocks*t.h+t.blocks)>t.w){ 
t.style.left=-(t.h*2+1)+'px'; 
t.ctr++; 
if(t.ctr>=t.count){ 
eval(t.action); 
t.ctr=0; 
}}else t.style.left=(parseInt(t.style.left)+t.h+1)+'px'; 
} 
 
function togglePause(){ 
if(this.tid==0){ 
this.tid=setInterval('startBar('+this.N+')',this.speed); 
}else{ 
clearInterval(this.tid); 
this.tid=0; 
}} 
 
function togglePause(){ 
if(this.tid==0){ 
this.tid=setInterval('startBar('+this.N+')',this.speed); 
}else{ 
clearInterval(this.tid); 
this.tid=0; 
}}  
   

[eSSeneX]

Umm tengo entendido que en la etiqueta form puedes controlar el evento onSubmit

Código HTML:

<form ... onSubmit="mostrarBarra();"> 

Te creas una función que muestre la barra de progreso.

También seme ocurre controlar el evento onClick del botón que hace el submit:

Código HTML:

<input name="btnEnviar" ... onClick="mostrarBarra();"> 

Espero te sirva

[eurodoblon]

Perdona es que no había puesto lo que tengo en el botón.

Código PHP:

  <input name="grabar" type="button" class="cajatexto1" value="Enviar Datos" style="font-weight: bold " onClick='javascript:bar.showBar(); validaform()'  />