Resolved Ajax Login - Form submitting even with "return false" in IE

[Shirk Deio]

Resolved: I declared the variables prior to the functions and the problem went away. I also had to put loginBox.innerHTML = "Logging in..."; AFTER the params were set, because I was erasing the information before I saved it in the variable.

Original post:

I'm trying to create an ajax login for my website. I've gotten it to work in Safari and Firefox, but as usual Internet Explorer is a thorn in my side.

Here's the code:

function login() {
	loginForm = document.getElementById("loginForm");
	loginBox = document.getElementById("loginBox");
	
	loginBox.innerHTML = "Logging in...";
	
	xmlHttp = getAjax();
	
	if(!xmlHttp) {
		alert("Your browser must have javascript enabled in order to use this feature!");
	} else {
		xmlHttp.onreadystatechange = function() {
			if(xmlHttp.readyState == 4) {
				loginBox.innerHTML = xmlHttp.responseText;
			};
		};
		
		params = "action=login&username="+loginForm.username.value+"&password="+loginForm.password.value;
		xmlHttp.open("POST","login_box.php","true");
		xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xmlHttp.send(params);
	};
	
	return false;
};

login_box.php:

// Other code to determine $login

if($login) {
	echo '
	Welcome, ' . $username . '!<br />
	<span class="small" onclick="logout(); return false;">Logout</span>
	';
} else {
	echo '
	<form id="loginForm" action="" method="post" enctype="multipart/form-data" onsubmit="login(); return false;">
	Username: <input class="inputText" type="text" name="username" /><br />
	Password: <input class="inputText" type="password" name="password" /><br />
	<input type="submit" name="submit_btn" value="Login" />
	</form>
	';

login_box.php is called as an include file initially:

<div id="loginBox">
<?php include("login_box.php") ?>
</div>

The idea is to have a loginBox div that changes when the ajax request is sent (i.e. to let the user know it is logging in). Then it displays the request return value once it loads.

It runs perfectly in Safari and Firefox, but in Internet Explorer the div doesn't change it's content to "Logging in..." and instead it submits the form (which refreshes the page and doesn't send the AJAX request).

In order to determine where the problem was, I tried replacing loginBox.innerHTML = "Logging in..."; with this:

loginForm.username.disabled = "disabled";
loginForm.password.disabled = "disabled";
loginForm.submit_btn.disabled = "disabled";
loginForm.submit_btn.value = "Logging in...";

The result was the same. I also tried adding alert("test"); at the beginning of the login() function and it alerts, then submits. I placed it after loginForm = document.getElementById("loginForm"); and it doesn't alert and still submits. Finally, I tried removing all the code inside login(); and simply putting return false; and it didn't submit.