Display a 'Page Loading' message between pages

Question

I have a form on my site that when submitted takes the user from Page1.html to Page2.html.

I would like to display a message between the form being submitted and "Page2 loading".

Can someone provide me with an example of this?

possible duplicate of [display "page loading" message](http://stackoverflow.com/questions/3713759/display-page-loading-message) — Diodeus - James MacFarlane, May 22 '12 at 16:56

score 1 · Accepted Answer · answered May 22 '12 at 16:59

1

If your form submit data via ajax then you could try something this:

$('form#myform').submit(function(e) {
   e.preventDefault();
   $('#message').html('Sending....');  // #message may be a div that contains msg
   $ajax({
     url: 'url_to_script',
     data: 'your_data',
     success: function(res) {
       // when submit data successfully then page reload
       window.location = 'page2.html'
     }
   });
});

answered May 22 '12 at 16:59

thecodeparadox

86,271
21
138
164

This looks the very ticket. I will try shortly. Many thanks!! – michaelmcgurk May 22 '12 at 16:59

score 1 · Answer 2 · edited May 23 '17 at 12:20

What you're looking to do can't be done by standard form submission.

You'll want to submit the form using ajax, and display a "Please wait" message while you are waiting for a response. Once the response is received and validated to be OK, you can then redirect the user to the page you now call page2.

The easiest way to submit a form via ajax is to serialize it to a string and pass it along. Then, you'll need a page to process the received data, and return an OK or and ERR.

The JS will then need to decipher next action.

This is not tested, but copied and pasted from various working projects. You'll need to download and include the json2.js project.

page1

<div id='pleaseWait'>Please Wait...</div>
<form id="theForm" onsubmit="doAjaxSubmit();">
    <input type='text' name='age' id='age' />
    <input type='submit' value='submit'>
</form>

<script type="text/javascript">
    function doAjaxSubmit(){
        var j = JSON.stringify($('#theForm').serializeObject());

        $('#pleaseWait').slideDown('fast');
        $.post('processor.php?j=' + encodeURIComponent(j), function(obj){
            if(obj.status=='OK'){
                window.location='page2.php';
            }else{
                $('#pleaseWait').slideUp('fast');
                alert('Error: ' + obj.msg);
            }
        }, 'json');
        return(false);
    }    


    $.fn.serializeObject = function(){
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
</script>

processor.php

<?php

    $j=json_decode($_POST['j'], true);


    if ((int)$j['age']<=0 || (int)$j['age']>120){
       $result = array('status'=>'ERR', 'msg'=>'Please Enter Age');
    }else{
        //Do stuff with the data. Calculate, write to database, etc.
        $result = array('status'=>'OK');
    }
    die(json_encode($result));
?>

This is essentially very similar to the answer below (by @thecodeparadox), but my example shows how to pass the entire for without having to manually construct your data object, shows how to validate on the PHP side as well as return the appropriate JSON data to either redirect the user, or to display an error, and uses animations to display the message.

Display a 'Page Loading' message between pages

2 Answers2