Webmaster Forum / HTML, CSS, Scripts / JavaScript / October 2006

I'm using a simple, pseudo progress bar.  Very simply, I display a still
image next to a form submit button until the user clicks on it, and then
I change the image source to an animated version of the still image.

Like so  (I use php a lot) ...

-- the submit button and still image --
<input type=submit name="update _stats" value="Update Mailbox Stats"
  class="button">
<img id="loading" src="still_image.gif">

-- the onSubmit JavaScript --
<form method="post" action="<?= $_SERVER['PHP_SELF'] ?>"
  onSubmit="document.getElementById('loading').src='animated_image.gif';
  return true;">

This works great.  When I click the submit, the animated gif appears (a
common little spinner) until the page reloads with the still image.  
However, after using it a few times (leaving the window open), the
animated gif stops appearing when I click on the submit button.

By playing around I have discovered that if I change the JavaScript,
save the page and reload, it works again (just arbitrarily - I change
"return true" to "return false" - save the page - reload it - change it
back to "return true" - save it - reload it and then it works as
intended again ... a few times ... until it breaks again).

I've tried deleting the cache and using a shift (forced) reload of the
page, but that doesn't help.  I'm using Firefox 1.5.  Am I doing
something wrong, ... is Firefox doing something wrong, ... or is this
method faulty?