ajax hidding div problem in IE

Question

I have a javascript page which checks an email and username, this works fine in every browser but Internet Explorer. The div box where errors are shown should be hidden unless an error is given e.g. username taken or invalid email.

If the email gets an error this is shown in the div tag, but doesnt work for username (in all browsers)

below is my code:

<script type="text/javascript">
     var usernameok;
    var emailok;

    function checksubmit()
    {
      if (usernameok && emailok) {
        document.getElementById("button").disabled = false;
      } else {
        document.getElementById("button").disabled = true;
      }
    }

    function username(username)
    {
               make_request();

      function stateck()
      {
        if (httpxml.readyState == 4) { 
          if (httpxml.responseText.indexOf("Username Ok") >= 0) {
                            usernameok = true;
          } else {
                          usernameok = false;
          }
          checkCanSubmit();           
        }
      }

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

    function email(email)
    {

      make_request();

      function stateck()
      {
        if (httpxml.readyState == 4) {
          if (httpxml.responseText.indexOf("Email Ok") >= 0) {
                          emailok = true;
          } else {
                          emailok = false;
          }
          checkCanSubmit();           
        }
      }

      httpxml.onreadystatechange = stateck;
      email_url = "check_email.php?email=" + email.value;
      httpxml.open("GET", email_url, true);
      httpxml.send(null);
    }
    </script>

Answer 1

I see your function stateck() is the return function from the HTTP request. However, you are defining it within another function. Not as an anonymous function, but just as a function within another function.

I see what you're doing now...ok, try this instead:

httpxml.onreadystatechange = function()
{
  if (httpxml.readyState == 4) {
    if (httpxml.responseText.indexOf("Email Ok") >= 0) {
      document.getElementById("email").style.backgroundColor = "green";
      document.getElementById("email").style.color = "white";
      document.getElementById("email_div").style.display = 'none';
      emailok = true;
    } else {
      document.getElementById("email").style.backgroundColor = "red";
      document.getElementById("email_div").innerHTML=httpxml.responseText;
      emailok = false;
    }
    checkCanSubmit();           
  }
};

Answer 2

Do you need to set your initial state to display: none? I think IE may initialize the divs with a non-0 height whereas the divs may be technically visible in other browsers but too short to see.

Edit:

Okay I think I misunderstood your question. Your problem is not with hiding the divs but with displaying errors for the username.

Nothing obvious jumps out at me. Try stepping through the code using VS or VWDE: http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/