Change The Submit Button To Indicate Waiting For An AJAX Response

In this example form a remote scripting call (AJAX) is made to a database to return a all the US states beginning with some letter of the alphabet. The resulting states will be returned in a drop down list.

After selecting a letter from the top drop down list you should click the "Submit AJAX Request" image button. That image will change to an animated GIF displaying "Waiting for AJAX results." When the results of the AJAX call are returned to this page the image will change again and display "AJAX Results Ready!" That image will be displayed for two seconds then will be reset to the "Submit AJAX Request" image so another request can be made.

A side benefit of changing the image submit button is the prevention of making multiple submits. Once the "Submit AJAX Request" image is clicked the AJAX request can not be submitted again until that image is restored.

NOTE: Since the actual AJAX results for this example usually return in less than a second so you would not see the images changing unless the server was under a heavy load. To slow things down for this example the "setTimeout" method is used to introduce a 3 second delay in returning the results. You would want to remove that delay from your production code. The same method is used to display the "AJAX Results Ready!!!" image for two seconds before resetting the submit image button to its ready state.

The Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<title>Show a please wait image for an AJAX request.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2006 Roderick Divilbiss">
<script type="text/javascript">
// code to create and make AJAX request
function getFile(pURL) {
    if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc 
        xmlhttp=new XMLHttpRequest();
    } else if (window.ActiveXObject) { //IE 
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    }

    // if we have created the xmlhttp object we can send the request
    if (typeof(xmlhttp)=='object') {
        xmlhttp.onreadystatechange=xmlhttpResults;
        xmlhttp.open('GET', pURL, true);
        xmlhttp.send(null);
        // replace the submit button image with a please wait for the results image.
        document.getElementById('theImage').innerHTML = '<img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_wait.gif" alt="Please Wait for AJAX Results">';
    // otherwise display an error message
    } else {
        alert('Your browser is not remote scripting enabled. You can not run this example.');
    }
}

// function to handle asynchronous call
function xmlhttpResults() {
    if (xmlhttp.readyState==4) { 
        if (xmlhttp.status==200) {
            // we use a delay only for this example
            setTimeout('loadResults()',3000);
        }
    }
}

function loadResults() {
    // put the results on the page
    document.getElementById('nextDropDown').innerHTML = xmlhttp.responseText;
    // replace the please wait image with the results are ready image
    document.getElementById('theImage').innerHTML = '<img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_ready.gif" alt="AJAX Results Ready">';
    // delay for 2 seconds before resetting the submit image button.
    setTimeout('resetImage()',2000);
}


function resetImage() {
    // show the submit image button for another AJAX call.
    document.getElementById('theImage').innerHTML = '<a href="javascript:void(0);" onclick="getFile(\'Change-The-Submit-Button-To-Indicate-Waiting-For-An-AJAX-Service.asp?l=\'+document.getElementById(\'letter\')[document.getElementById(\'letter\').selectedIndex].value)"><img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_submit.gif" alt="Submit AJAX Request" type="image"><\/a>';
}
</script>
<style>
<!--
#submitImage {
    vertical-align: text-bottom;
    padding-top: 3px;
}
-->
</style>
</head>

<body>
<p>Select A Letter: 
<select size="1" name="letter" id="letter">
  <option value="A">States beginning with A</option>
  <option value="C">States beginning with C</option>
  <option value="D">States beginning with D</option>
  <option value="F">States beginning with F</option>
  <option value="G">States beginning with G</option>
  <option value="H">States beginning with H</option>
  <option value="I">States beginning with I</option>
  <option value="K">States beginning with K</option>
  <option value="L">States beginning with L</option>
  <option value="M">States beginning with M</option>
  <option value="N">States beginning with N</option>
  <option value="O">States beginning with O</option>
  <option value="P">States beginning with P</option>
  <option value="R">States beginning with R</option>
  <option value="S">States beginning with S</option>
  <option value="T">States beginning with T</option>
  <option value="U">States beginning with U</option>
  <option value="V">States beginning with V</option>
  <option value="W">States beginning with W</option>
</select>
&nbsp;
<span id="theImage">
  <a href="javascript:void(0);" onclick="getFile('Change-The-Submit-Button-To-Indicate-Waiting-For-An-AJAX-Service.asp?l='+document.getElementById('letter')[document.getElementById('letter').selectedIndex].value)">
    <img id="submitImage" name="submitImage" src="images/ajaxCallChangeImage_submit.gif" alt="Submit AJAX Request" type="image">
  </a>
</span>
</p>
<p>AJAX (remote query) Results: 
<span id="nextDropDown">
  <select size="1" name="tempSelect" disabled>
    <option>Choose A Letter Above</option>
  </select>
</span>
</body>

</html>

When using an image button for submitting a form, how can you change the image to indicate waiting for an AJAX response to be returned?

The Example: