Login Form

Contact Us or call 1-877-932-8228
Login Form

Login Form

Have you ever forgotten your username or password for a website? Have you waited 10 seconds for a full page to redraw while the only thing new is a message telling you that the username and password are not recognized. Ajax can make that process much less painful for the user.

Imagine a simple login form like the one shown below, but on a page with a lot of other content:Page with Content

When the user fills the form out with a bad password, an error message appears and the username is highlighted:Error Message

The rest of the page should stay the same. Ajax makes this possible without refreshing the entire page. The code for this is shown below; to run the demo, first:

  1. Open the command line (on a PC) or terminal (on a Mac), and navigate to the directory AjaxApplications/Demos/.
  2. Type npm install.
  3. Type npm start to start the Node.js server.
  4. Visit http://localhost:8080/Login.html in your browser to view the page.

Code Sample:

AjaxApplications/Demos/Login.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<link href="Login.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript">
	function login(form) {
		var un = form.Username.value;
		var pw = form.Password.value;
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("post", "Login", true);
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				loginResults();
			}
		}

		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
		xmlhttp.send("username=" + un + "&password=" + pw);

		function loginResults() {
			var loggedIn = document.getElementById("LoggedIn");
			var badLogin = document.getElementById("BadLogin");
			if (xmlhttp.responseText.indexOf("failed") == -1) {
				loggedIn.innerHTML = "Logged in as " + xmlhttp.responseText;
				loggedIn.style.display = "block";
				form.style.display = "none";
			} else {
				badLogin.style.display = "block";
				form.Username.select();
				form.Username.className = "Highlighted";
				setTimeout(function() {
					badLogin.style.display = 'none';
				}, 3000);
			}
		}
	}

	observeEvent(window, "load", function() {
		var loginForm = document.getElementById("LoginForm");
		observeEvent(loginForm, "submit", function() {
			login(loginForm);
		});
	});
</script>
</head>
<body>
<form id="LoginForm" onsubmit="return false">
	<h1>Login Form</h1>
	<div class="FormRow">
		<label for="Username">Username:</label>
		<input type="text" size="15" id="Username" name="Username">
	</div>
	<div class="FormRow">
		<label for="Password">Password:</label>
		<input type="password" size="15" id="Password" name="Password">
	</div>
	<div class="FormRow" id="LoginButtonDiv">
		<input type="submit" value="Login">
	</div>
	<div id="BadLogin">
		<p>The login information you entered does not match 
		an account in our records. Please try again.</p>
	</div>
</form>

<h1 id="LoggedIn"></h1>

</body>
</html>

The information is sent using a POST request, since the authentication information would be confidential - under HTTPS it would be automatically encrypted.

Next