ajax loading image..

Question

I have a page which checks a form for valdation, the main checks are for if the email or username is already in the database. I have this working fine, but I cannot figure out how to add a loading image...for when the user changes either username or email when it is being checked.

my fucntion to check username is below, its similar for the checking email

function check_username(username)
{
var httpRequest;
make_request()
function stateck() 
 {

 if(httpxml.readyState==4)

  { 
  if (httpxml.responseText.indexOf ("Username Ok") >= 0)
  {
   document.getElementById("username").style.backgroundColor = "green";
   document.getElementById("username").style.color = "white";
   document.getElementById("username_div").style.display = 'none';
   usernameok = true;

  }

   else 
  {
   document.getElementById("username").style.backgroundColor = "red";
   document.getElementById("username_div").style.visibility = 'visible';
   document.getElementById("username_div").innerHTML=httpxml.responseText;
   usernameok = false;

  }
  checkCanSubmit();   
  }


 }

httpxml.onreadystatechange=stateck;
user_url="check_username.php?username=" + username.value;
httpxml.open("GET",user_url,true);
httpxml.send(null);
}

Thanks alot...btw I have already tried jquery libary, and I prefer it this way. cheers

Answer 1

First, use http://www.ajaxload.info/ to generate a nice animated gif. Then, when check_username is called (before any other calls) create a div which has your animated gif as its background-image. There are countless ways to do this (inline, as an overlay, etc.) so it's really up to you. Last, when check_username finishes, remove the div (or at least clear the animated background-image).

Answer 2

ajaxload.info does indeed work well, but you don't need to bother with a div and background-image. Simply create an , using document.createElement, then set the src of the image, then add it to your document:

var img = document.createElement('img');
img.src = '<the URL of your loading image>';
function stateck() {
    ...

Now you can insert the newly created img into your document, then remove it in stateck().