How to show loading-div after submitting a form with jQuery?

Question

I am new at Javascript and jQuery. I want to show a "loading-gif" after the user submitted a form but can't figure out why my code is not working. That's the situation:

the form has the id="form"
the loading-div has the id="loading" and the style="display:none" (and some others of course)
the submit-button has the class="formtrigger" (and no type="submit")

That's my javascript (initialized after jquery at the bottom of the html-page):

    $('.formtrigger').click(function() {
      $('#loading').show();
      $('#form').submit();
    });

When I click the button, the form is submitted, but the loading-div doesn't appear. I tried the line "$('#loading').show();" without binding it on the click-event and it worked. I also tried this code:

$('.formtrigger').click(function() {
    alert('blablabla');
    $('#form').submit();
});

and both statements worked! First the alert is shown and then the form is submitted. Why does the other code not work?

Thanks in advance.

EDIT: I've also tried the following variations without success

$('.formtrigger').click(function() {
    $('#form').submit();
});
$('#form').submit(function() {
    $('#loading').show();
});

and

$('.formtrigger').click(function() {
    $('#loading').show();
    window.setTimeout($('#form').submit(), 5000);
});

and

 //HTML
 <button type="submit">...</button>
 //JS
 $('#form').submit(function() {
     $('#loading').show();
 });

The alert halts processing, the former does not. The form is submitted and a postback is triggered.. — StaticVoid
try removing the .submit() from the click event handler just to test if the .show() is working.. it probably is and the submit is just reloading the page before you see it — webkit
try: window.setTimeout($('#form').submit(), 5000); after the .show() — StaticVoid
Did you tried to set the function on submition of the form? $('#form').on('sumbit', function(){ $('#loading').css('display','block'); }); — Mike Boutin
I also tried to show the spinner on submit but it didn't work.. In my php script, which handles the form input, I set sleep(5) to make sure there is enough time to show the spinner.. When I remove the .submit() from the click event handler the .show()-function is working! — user3745073

urbz urbz · Accepted Answer · 2014-06-16T14:15:12

In your .submit(), show your loading spinner:

$("#loading").show();

And after your .submit() is done, hide it:

$("#loading").hide();

And make your spinner display: none; by default since the jQuery above simply changes the css properties for your specified element.

I provided you with a simple demo where I have an AJAX function echoing your message from the text input. It will show a loading spinner until it reaches success.

How to show loading-div after submitting a form with jQuery?

2 Answers

Fiddle Demo