Hi all.

I have a form. When the submit button is clicked, I want a message to fade-in in a pop-up, wait for a pre-determined amount of time, and then fade out.

I found the following code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#message {
  position:absolute;z-Index:101;left:-3000px;top:-3000px;width:200px;height:200px;background-Color:#FFFF66;
}

/*]]>*/
</style></head>

<body>
<form action="#"  onsubmit="return Message(this,'message',1000,2000);">
<input type="submit" name="" value="Submit"/>
</form>
 <div id="message" >
  My Message
 </div>

<script type="text/javascript">
/*<![CDATA[*/

function Message(frm,id,ms,hold){
 var obj=document.getElementById(id),ms=typeof(ms)=='number'?ms:1000,hold=typeof(ms)=='number'?hold:ms*4,wwhs=WWHS();
 if (obj.offsetLeft<0){
  animate(frm,obj,0,100,new Date(),ms,hold);
  obj.style.left=wwhs[2]+(wwhs[0]-obj.offsetWidth)/2+'px';
  obj.style.top=wwhs[3]+(wwhs[1]-obj.offsetHeight)/2+'px';

 }
 return false;
}

function animate(frm,obj,f,t,srt,mS,hold){
 var ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
 if (isFinite(now)){
  obj.style.filter='alpha(opacity='+now+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
 }
 if (ms<mS){
  setTimeout(function(){ animate(frm,obj,f,t,srt,mS,hold); },10);
 }
 else {
  if (t==100){
   setTimeout(function(){ animate(frm,obj,100,0,new Date(),mS); },hold);
  }
  else {
   frm.submit();
  }
 }
}

function WWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}


/*]]>*/
</script>
</body>

</html>
As written, with the form action set to "#" it works fine.

The problem is that my form tag looks like this:
Code:
<form name="cart_quantity" action="http://alongcrazyalley.com/store/index.php?main_page=product_info&amp;cPath=0&amp;products_id=2&amp;action=add_product" method="post" enctype="multipart/form-data"  target='zenframe' onclick="return Message(this,'message',1000,2000)">
With this form definition, the script works the first time a button is clicked, but does not work after that unless the page is reloaded.

If anyone has a suggestion on how to fix this or another script that will do the same thing, I'd appreciate hearing from you.

btw, the form target is an iframe which allows the form action to be done in the background so the browser stays on the main screen.