Swop button for loading image (Ajax)

When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete.

I don’t want a loading image anywhere else as on mobile phones it can’t always be seen due to small screen size.

I have grabbed the event (which references the form, is that right?) and I have something like this:

<button type="submit" name="name_can_vary">Search</button>
event.name_can_vary.style.visibility = 'hidden';
//(obviously this isn't complete code but no doubt explains what I am talking about)

…which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image.

Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on).

Thanks for any help.

I’m not familiar with AJAX, but can’t you use the readyStates to determine when to hide/show? Aka when it reaches “4” (I believe that is the end), do the JS to appear the submit button and hide the image.