Show loading gif after submit button is clicked?

Question

I'm trying to show a loading gif after a user clicks submit on a form.

I have search endlessly for a good tutorial showing how it done.

I get half way there but the gif doesn't hold for long enough, do any one know of a good tutorial or the scripts need to complete this.

Answer 1

you do it using setTimeout to reload the gif (myImg.src = myImg.src;) just after the submit.

function wait_animation()
{
    var myMsg = "Sending form data to server... Please Wait...";
    window.status = myMsg;
    msg("<img name='wait' src='/all/images/wait.gif' height=7 width=78> " + myMsg);
}

function long_wait_animation()
{
    var myMsg = "Still sending... You are uploading large files and we have not yet received " +
          "all the information. Unfortunately, Internet Explorer sometimes interprets " +
          "this delay as a server error. If you receive a 'Timeout' or 'Site not found' " +
          "error please click your 'Back' button and try sending less files.";
    window.status = "Still sending ...";
    msg("<img name='wait' src='/all/images/wait.gif' height=7 width=78> " + myMsg);
}

// Generic onSubmit handler
function form_on_submit( myForm )
{
    form_check_lists( myForm );
    if (form_errors.length != 0) {
     err( 'There are some problems with the information you entered:' +
        '<ul><li>' + form_errors.join('<li>') );
     form_enable_submit(myForm); // re-enable submit (so user can retry)
    } else {
     hideLayer('err');
     window.status = "Uploading Data... Please Wait...";
     form_disable_submit(myForm); // function that prevents double-submissions
     window.setTimeout("wait_animation()", 10);     // 1/100th 
sec (must happen after submit)
     window.setTimeout("long_wait_animation()", 60*1000); // 60 secs
     myForm.submit();
    }
    // reset form errors
    form_errors = new Array();
    return false;   // false=don't submit (because we probably just submitted it).
}

The code above is doing basically the same thing except msg() uses innerHTML to add the animated gif rather than changing the source of an existing gif. The concept is the same though, you need to load the gif AFTER the submit and you can only do that using setTimeout (because otherwise IE blocks new scripts).

Answer 2

It's really simple. You have an image, initially hidden:

<img src="myloadingimage.gif" style="display: none;" id="loading_image">

You make an AJAX request:

$('#loading_image').show(); // show loading image, as request is about to start
$.ajax({
    url: '..',
    type: '..',
    complete: function() {
        // request is complete, regardless of error or success, so hide image
        $('#loading_image').hide();
    }
});

It's not rocket science, I promise. :)

EDIT: In response to your comment, this uses jQuery. You put the jQuery tag so I assume that is fine.

I also noticed I didn't fully address your original question, which is that you want to show the loading bar for what is presumably a regular form. If your form tag has an id of "myform", this should do it:

$('#myform').submit(function() {
    $('#loading_image').show(); // show animation
    return true; // allow regular form submission
});

You could also throw a line like this in:

$(':submit',this).attr('disabled','disabled');

If you want to stop users from clicking submit more than once. This should still be verified server-side but it is a nice superficial barrier of defense.

Answer 3

To set globally ajax options you need to do this

<img src="myloadingimage.gif" style="display: none;" id="loading_image">

$("#loading").bind("ajaxSend", function(){

   $(this).show();

 }).bind("ajaxComplete", function(){

   $(this).hide();

 });

All the Ajax calls on the page will use these default settings

Answer 4

"The GIF doesn't hold for long enough"? The problem is probably that the GIF doesn't loop correctly. You can make it loop with most image editors that support GIFs.