title: Display loader before form submits in MVC
body: <p>I currently have a login form as displayed below:</p>
  
  <pre><code>+----------------------------------+
  |                                  |
  |           +----------+           |
  |           | E:       |           |
  |           | P:       |           |
  |           | SUBMIT   |           |
  |           +----------+           |
  |             LOADER               |
  |                                  |
  +----------------------------------+
  </code></pre>
  
  <p>Form Definition:</p>
  
  <pre><code> @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post))
        {
          @Html.AntiForgeryToken()
              &lt;form action="" id="test"&gt;
  </code></pre>
  
  <p>My submit button is displayed as below:</p>
  
  <pre><code>   &lt;div&gt;
         &lt;input type="submit" value="Log in" onclick="OpenSite();" /&gt;
         &lt;a&gt;@Html.ActionLink("Forgot your password?","ForgotPassword","Account")&lt;/a&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Loader:</p>
  
  <pre><code>   &lt;div class="loader" id="myLoader" style="display:none"&gt;Loading...&lt;/div&gt;
  </code></pre>
  
  <p>With an 'OpenSite' function:</p>
  
  <pre><code>&lt;script&gt;
      function OpenSite() {
  
          $('.loader').show();
          $('#openPopup').click();
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>How can i force this function to execute before the form is submitted, but when I press the '<code>Submit</code>' button?</p>
  
  <p>I.e:</p>
  
  <pre><code>+---------------+
   User Fills form
  +---------------+
         ||
         \/
  +---------------+
    User Presses 
       submit
  +---------------+
         ||
         \/
  +---------------+
   Display loader
  +---------------+
         ||
         \/
  +---------------+
    Display popup
  +---------------+ 
         ||
         \/
  +---------------+
    Submit form 
    to controller
  +---------------+
  </code></pre>
  
  <p>This means that the 'loading' animation will display while the next page is loading.</p>
  
  <p>How can this be achieved? </p>
  
  <p>I tried adding an <code>alert("hello world");</code> to the start of the function, and it executed but my loader didn't display at all :(</p>
  
  <p>Any help would be much appreciated.</p>
  
  <p>I have also tried:</p>
  
  <pre><code>$("#test").submit(function (event) {
      $('#myLoader').show();
  });
  </code></pre>
  
  <p>with no luck</p>