Showing a loading image while loading php script

Question

Small (or big) problem once again

I am using a simple html form, on submit action calls a php (mail) script.. now this script takes a little while to finish as there are some time limits in there before sending another mail.. I expected it to load a blank page, or at least display everything before loop.. but it didn't, instead it sort of "hangs" at the form stuck (although you can see the url of the script is loading in the browser bar) and once the script is finished it loads all the output on the page.. so I started looking at some ways of how to make this loading image.. or atleast let the user know something is happening, and that the script is working.

I saw some stuff on stackover flow and included this, which was supposed to show a loading image where the submit button is, but I don't think it works because it isn't loading the page with the form anymore.. but the running the php loop, although I am going to let you see it anyway in the hope of.. something:

$('#loading_image').show(); // show loading image, as request is about to start
$.ajax({
url: '..',
type: '..',
complete: function() {
    // request is complete, regardless of error or success, so hide image
    $('#loading_image').hide();
}
});
$('#myform').submit(function() {
$('#loading_image').show(); // show animation
return true; // allow regular form submission
});

and my form

<form method="post" action="sendeveryone.php" id="myform" onReset="return confirm('Do you really want to reset the form?')">
                    <fieldset>
                    Please note:  All e-mails start with "Dear {MEMBER_NAME}, " If you would like to mention their username in the body of your email, all you have to do is type '{MEMBER_NAME}' and it will replace it to their username.<br><br>
                    <br>
                        <label class="control-label" for="subject">Subject</label>

                            <input id="subject" name="subject" class="span5" type="text">

                 <label class="control-label" for="body">Body</label>

<div class="row-fluid">
    <div class="utopia-widget-content-nopadding">
        <div class="span12 text-editor">
            <textarea id="input" name="input"></textarea>
        </div>
    </div>
 </div>

<br><img src="myloadingimage.gif" style="display: none;" id="loading_image">

                    <button class="btn btn-large btn-primary span5" type="submit">Send</button>
                    <button class="btn btn-large span5" type="reset">Cancel</button>

                    </fieldset>
                    </form>

Answer 1

You can use the .ajaxStart() and .ajaxStop() methods with jQuery

$('.log').ajaxStart(function() {
    $(this).text('Triggered ajaxStart handler.');
});