Question

I would like to display an ajax loader icon when user try to submit a form, and block the content of the page (Fade in).

I have this code, but it works wrongly, it display the loader icon before submitting the form and hide it after submitting the form.

<script type="text/javascript">
function ajaxFunction() {
    var xmlHttp;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            document.getElementById("content").innerHTML = xmlHttp.responseText;
        }
    }
    xmlHttp.open("GET", "?action=sms&pageaction=Send SMS", true);
    xmlHttp.send(null);
}​
</Script>

And I have DIV :

<!---progress-->

<div id="content" > 
  <br/>
  <br/>
  <br/>
  <h1>Loading ... Please wait </h1>
  <br/>
  <br/>
  <img src="image//loading.gif" />
    </div>

<!---progress-->

And the submit button is calling the ajaxFunction()

<input type="submit" name="pageaction"  class="send_sms" value="Send SMS" onclick="ajaxFunction()" />

Anybody please help me in correcting my code to make it work as follow:

1. display a transparent background to block the page while submitting the form.
2. display a loading icon.
3. Hide the transparent background and hide the loading icon.

Thanks for all

Answer 1

Set your content to hide. You can do that simply:

<div id="content" style="display:none;">
  ...
</div>

Put it visible before sending the AJAX request.

document.getElementById("content").style.display = "block";​​​​​​
xmlHttp.send(null);