title: How to show loading-div after submitting a form with jQuery?
body: <p>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:</p>
  
  <ul>
  <li>the form has the id="form"</li>
  <li>the loading-div has the id="loading" and the style="display:none" (and some others of course)</li>
  <li>the submit-button has the class="formtrigger" (and no type="submit")</li>
  </ul>
  
  <p>That's my javascript (initialized after jquery at the bottom of the html-page):</p>
  
  <pre><code>    $('.formtrigger').click(function() {
        $('#loading').show();
        $('#form').submit();
      });
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>$('.formtrigger').click(function() {
      alert('blablabla');
      $('#form').submit();
  });
  </code></pre>
  
  <p>and both statements worked! First the alert is shown and then the form is submitted. Why does the other code not work?</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>EDIT: I've also tried the following variations without success</strong></p>
  
  <pre><code>$('.formtrigger').click(function() {
      $('#form').submit();
  });
  $('#form').submit(function() {
      $('#loading').show();
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$('.formtrigger').click(function() {
      $('#loading').show();
      window.setTimeout($('#form').submit(), 5000);
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code> //HTML
   &lt;button type="submit"&gt;...&lt;/button&gt;
   //JS
   $('#form').submit(function() {
       $('#loading').show();
   });
  </code></pre>