CODEWITHSUNDEEP
jqueryformsanimation
basZero
basZero

Reputation: 4284

Loading GIF stops animation when submitting a form in Safari

Check out this simple JSFiddle (ignore all the javascript code, this question here is only about the animated loading GIF).

I want to show the animated loading GIF before a form gets submitted.

I tried this:

setTimeout(function(){
 $('form[name="checkout-form"]').submit();
},1000);

And this works fine, the animated loading GIF appears for 1 second, however, it stops the animation as soon as the submit request has been sent.

What do I have to do in order to let the GIF animated until the page loads again (or until the response comes back from the page?)

Upvotes: 5

Views: 3146

Answers (1)

mplungjan
mplungjan

Reputation: 177851

You need to AJAX the form. When you submit the form, the page and animations are unloaded.

So try

$(function() {
  $('form[name="checkout-form"]').on("submit",function(e) {
    e.preventDefault(); // stop the actual submission
    $("#animationgif").attr("src","submitting.gif?rnd="+new Date().getTime()).show();    
    $.post(this.action,$(this).serialize(),function() {
      $("#animationgif").attr("src","blank.gif").hide();    
    });
  });
});

The ?rnd="+new Date().getTime() is a tactic called cache busting, which will make sure it starts from the beginning.
It can be removed if it is a looping ajax throbber.

Upvotes: 1

Related Questions