Ajax hidding div problem in IE
I have a javascript page that checks email and username, this works fine in every browser, but in Internet Explorer. The div field that displays errors should be hidden unless an error is specified, e.g. username, accepted or invalid.
If the email gets an error, it shows up in a div tag, but doesn't work for the 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>
a source to share
I see that your stateck () function is a return function from an HTTP request. However, you define it within another function. Not as an anonymous function, but as a function inside another function.
Now I can see what you are doing ... 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();
}
};
a source to share
Do you need to set the initial state for display to: none? I think IE can initialize divs with a non-0 height, whereas divs can technically be visible in other browsers, but too short to see.
Edit:
Ok I guess I misunderstood your question. Your problem is not hiding the div, but displaying errors for the username.
Nothing obvious jumps out at me. Try to execute the code using VS or VWDE: http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/
a source to share