title: Show loading gif after clicking form submit using jQuery
body: <p>I'm trying to simply show a loading gif once the form is submitted. My code is not working correctly for the loading gif to show. You'll see my image for the gif is set to <code>visibility: hidden</code>.</p>
  
  <pre><code>&lt;script src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="" style="width: 480px; margin: 0 auto; margin-top: 20px;" id="form_wrapper"&gt;
      &lt;img src="img/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;"&gt;
      &lt;div class="fade" id="form"&gt;
          &lt;form action="process_login.php" method="POST" name="simplelogin" id="login_form"&gt;&lt;br /&gt;
              &lt;label for="username"&gt;&amp;nbsp; Username:&lt;/label&gt;
              &lt;input type="username" name="username" id="username" size="30" required&gt;&lt;br&gt;&lt;br&gt;
              &lt;label for="password"&gt;&amp;nbsp; Password:&lt;/label&gt;
              &lt;input type="password" name="password" id="password" size="30" required&gt;&lt;br&gt;&lt;br&gt;
              &lt;input class="load_button" type="submit" name="submit" id="submit" value="Submit" placeholder="Submit"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="fifty"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $('.load_button').submit(function() {
          $('#gif').show(); 
          return true;
      });
  &lt;/script&gt;
  </code></pre>