How to show a loading gif mean while a submit form is being executed JQuery

Question

I'm trying to show a simple spinner gif meanwhile a submit is being executed (it takes a bit because I have to establish some communications with providers via web services).

So, I have this:

$('#gds_form').submit(function() {
        var pass = true;
        //some validations

        if(pass == false){
            return false;
        }

        $("body").prepend('<div class="ui-widget-overlay" style="z-index: 1001;"></div>');
        $("body").prepend("<div id ='PleaseWait'><img src='/images/spinner.gif'/></div>");
        return true;
    });

the thing is, that the .gif doesn't show any animation, it's like it is frozen.

Why?

There's another way to implement this (notice that I'm not using AJAX and I don't want to)?

Thank you.

Answer 1

Using the jQuery submit function, you can specify a loading image like this:

$('#form').submit(function() {
    $('#wait').show();
    $.post('/somepage.htm', function() {
        $('#wait').hide();
    });
    return false;
});