0

I have a form which has an input of type image as follows. 

<input type="image" id="submit" src="red_btn.png">

Once this image is clicked to submit the form, i change the image to an animated gif to show a spinner 

$('form').submit(function(e){
 //e.preventDefault();
 $('#submit').attr("src", "loading.gif");
 });

However, there is no animation. But when i prevent form submission, the gif animates.

This is on FF 16

Pls help.

mongle
  • 65
  • 1
  • 7

1 Answers1

0

Seems the page is in the process of transitioning to the submit page, so you really don't want to show anything to the user at that point. If you were doing an ajax call, then yes, a spinner is appropriate. But with a standard form submit, I would think the browser is already working on loading the new page so this one is about to be flushed.

Ryan Griggs
  • 2,457
  • 2
  • 35
  • 58
  • Have you tested in other browsers? – Ryan Griggs Oct 31 '12 at 19:19
  • Thanks Ryan. Agreed, it would make more sense for ajax. However, the form submission takes on average 10-15 secs as there is some processing involved and the submit page is shown only after that. Would be good to show a spinner to let user know that it is being processed. – mongle Oct 31 '12 at 19:23
  • Take a look at this: http://www.codingforums.com/showthread.php?t=191147 and also the links listed therein. Seems they discovered you have to add the GIF image to the DOM after the form is submitted. This was an IE issue, but may apply to newer firefox as well. – Ryan Griggs Oct 31 '12 at 19:25
  • so you would create a new image `var x = $('');` then add to the dom at form submit time `$("form").append(x);` – Ryan Griggs Oct 31 '12 at 19:27
  • May also be wise to preload the GIF in another hidden image, so you don't have to wait for it to be downloaded before being displayed. – Ryan Griggs Oct 31 '12 at 19:28
  • I have instead chosen to have a seperate button like $( function(){ $('#spinner').hide(); $('#submit').click(function(e){ e.preventDefault(); $('#submit').hide(); $('#spinner').show(); $('form').submit(); }); }); – mongle Oct 31 '12 at 19:42