title: Ajax loading after form submit
body: <p>I want to display a loading image after I submit a form. Here is my current code (I am using Bootstrap): </p>
  
  <pre><code>&lt;form method="GET" action="/search/results" id="searchform"&gt;
          &lt;div class="form-inline"&gt;
          &lt;div class="form-group"&gt;
              &lt;input type="text" class="form-control" id="name" name="name" placeholder="Search" style="min-width: 300px;" required autofocus&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-dark btn-md"&gt;Search&lt;/button&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="form-group"&gt;
              &lt;h4 class="text-muted"&gt;Scoring Type&lt;/h4&gt;
              &lt;label class="radio-inline"&gt;
                  &lt;input type="radio" name="scoring" id="standard" value="standard" checked&gt; Standard
              &lt;/label&gt;
              &lt;!-- other radio options --&gt;
          &lt;/div&gt;
  &lt;/form&gt;
  &lt;br&gt;
  &lt;div class="modal"&gt;
  &lt;/div&gt;
  &lt;style&gt;
          .modal {
              display: none;
              position: fixed;
              z-index: 1000;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              background: rgba( 255, 255, 255, .8 ) 
                          url("{% static 'img/loading.gif' %}") 
                          50% 50% 
                          no-repeat;
              }
          body.loading {
              overflow: hidden;   
          }
          body.loading .modal {
              display: block;
          }
  &lt;/style&gt;
  </code></pre>
  
  <p>The form submits to a page called /search/results, but I want this page to be loaded with ajax. Once it is done loading, I want to fully replace the search webpage with the webpage that contains the results. While it is loading, I want <code>$('body').addClass('loading');</code> to be applied, which will display the loading icon in the way I want (I do not want any changes in css, it works how I want it to). I have looked all over the place but I cannot seem to find a solution that works for me. Thanks.</p>