Showing a loading image

[downah]

Hi guys,

 

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>

 

This didn't work.. anyone has any hints or tips for me or other ways of going around this?

[redarrow]

your need ajax mate, sorry php can not do that.

 

you could just tell the user and direct them somewhere else in php/html.

 

if you want a count down to when every think done then your need ajax/JavaScript.

[redarrow]

 

 

loading image example from another web site read it ok.

 

http://www.sitepoint.com/forums/showthread.php?590826-how-to-show-ajax-loading-gif-above-the-page-using-javascript

[Fadion]

jQuery's $.ajax() has e beforeSend method that is triggered just before the AJAX call is made and is a good way to show a preloader image. It would look like this in your code:

 

$.ajax({
    url: '..',
    type: '..',
    beforeSend: function() {
        $('#loading_image').show();
    }
    complete: function() {
        $('#loading_image').hide();
    }
});

 

Hope it helps.