I want to display a loading image after I submit a form. Here is my current code (I am using Bootstrap):

<form method="GET" action="/search/results" id="searchform">
        <div class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="name" name="name" placeholder="Search" style="min-width: 300px;" required autofocus>
        </div>
        <button type="submit" class="btn btn-dark btn-md">Search</button>
        </div>
        <br>
        <div class="form-group">
            <h4 class="text-muted">Scoring Type</h4>
            <label class="radio-inline">
                <input type="radio" name="scoring" id="standard" value="standard" checked> Standard
            </label>
            <!-- other radio options -->
        </div>
</form>
<br>
<div class="modal">
</div>
<style>
        .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;
        }
</style>

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 $('body').addClass('loading'); 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.

I want to display a loading image after I submit a form. Here is my current code (I am using Bootstrap):

<form method="GET" action="/search/results" id="searchform">
        <div class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="name" name="name" placeholder="Search" style="min-width: 300px;" required autofocus>
        </div>
        <button type="submit" class="btn btn-dark btn-md">Search</button>
        </div>
        <br>
        <div class="form-group">
            <h4 class="text-muted">Scoring Type</h4>
            <label class="radio-inline">
                <input type="radio" name="scoring" id="standard" value="standard" checked> Standard
            </label>
            <!-- other radio options -->
        </div>
</form>
<br>
<div class="modal">
</div>
<style>
        .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;
        }
</style>

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 $('body').addClass('loading'); 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.

• javascript
• jquery
• ajax

• Your form when submitted will go to another page, then how can you expect it to show a loading image, for that you will need to use.Use Ajax for this rather than submitting the form – Sourabh Kumar Sharma Commented Oct 21, 2015 at 1:11
• 1 That's what I'm asking, how do I use ajax? Nothing I have seen has worked for me. – Zach P Commented Oct 21, 2015 at 1:12
• Ok let me answer that in the answer – Sourabh Kumar Sharma Commented Oct 21, 2015 at 1:14
• post your javascript code that didn't work so we can help you – kdureidy Commented Oct 21, 2015 at 1:26

2 Answers 2

To make sure the form wont submit as normal ones: remove method="GET";

 <form action="/search/results" id="searchform">

Js:

$("#searchform").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this );
  var url = $form.attr( "action" );
  //before send
  $("body").addClass("loading");

  /* Send the data using post */
  var posting = $.post(url , $( "#searchform" ).serialize() );

  /* Alerts the results */
  posting.done(function( data ) {
     //use data
     $("body").removeClass("loading");

  });
});

use the below procedure:

var data = $("#searchform").serialize();

$('#searchform').on('submit',function(event){
event.preventDefault();
$.ajax({
            type: "POST",
            url: "/search/results",
            data: data,
            dataType: "json",
            success: function(data) {
               //on success remove the image
            },
            error: function(){
                  alert('error handing here');
            }
        });
})