Firefox onsubmit image change

I have a form with a file field and a submit button, used for uploading file (obviously). When the form is submitted i was to display a little spinner to indicate that the upload is taking place.

So on the form i have onsubmit="document.getElementById('spinnerholder').innerHTML='<img src\'spinner.gif\'\ \/>'"

spinnerholder currently contains an image called blank.gif, this should be replaced by spinner.gif when the form is submitted.

Firefox doesn't like this, the gif is not displayed. I put the same code on a button (see below) and it worked fine:

<button onclick="document.getElementById('spinnerholder').innerHTML = '<img src=\'spinner.gif\' \/>'">click me</button>

After much head banging against walls and tables and putting alerts at various points in the page, i decided to put another line of javascript in front of the line in the onsubmit:

onsubmit="document.getElementById('spinnerholder').innerHTML='uploading'; document.getElementById('spinnerholder').innerHTML='<img src\'spinner.gif\'\ \/>'"

So all its doing is changing the contents of the holder from an image to text to another image. And now it works fine. Yaaaaay go FireFox

That fix didn't work it turns out, it was only because the image was elsewhere on the page that it appeared to work. However, that did lead me to a solution, which was to preload the spinner.gif in the form of a background image. This does work and has been tested.

Post a comment