How To Create Login Form Using JavaScript - Part II

var usernameArray = ["User_1", "User_2", "User_3", "User_4"];
var passwordArray = ["Password_1", "Password_2", "Password_3", "Password_4"];

<script type = "text/javascript">
 
var count = 2;
function tryToLogin() {
var un = document.loginPage.userName.value;
var pw = document.loginPage.passWord.value;
var valid = false;
 
var usernameArray = ["User_1", "User_2", "User_3", "User_4"];
var passwordArray = ["Password_1", "Password_2", "Password_3", "Password_4"];
 
for (var i=0; i <usernameArray.length; i++) {
if ((un == usernameArray[i]) && (pw == passwordArray[i])) {
valid = true;
break;
}
}
 
if (valid) {
alert ("Login Successfully");
window.location = "next.html";
return false;
}
 
var t = " chances";
if (count == 1) {t = " chance"}
 
if (count >= 1) {
alert ("Invalid userName or passWord.  You have " + count + t + " to correct your details.");
document.loginPage.userName.value = "";
document.loginPage.passWord.value = "";
setTimeout("document.loginPage.userName.focus()", 25);
setTimeout("document.loginPage.userName.select()", 25);
count --;
}
 
else {
alert ("Wrong Detail! You have no more chances to be given!");
document.loginPage.userName.value = "No more chances to be given.!";
document.loginPage.passWord.value = "";
document.loginPage.userName.disabled = true;
document.loginPage.passWord.disabled = true;
return false;
}
}
 
</script>

<center>
 
<form name="loginPage">
 
<table cellpadding="5" cellspacing="5">
<tr>
	<td colspan="3">
		<h1 style="text-align:center;">
			Login
		</h1>
	</td>
</tr>
<tr>
	<td>
		<h2>Username</h2>
	</td>
	<td width="10">
	</td>
	<td>	
		<input type="text" name="userName" autofocus="autofocus" style="font-size:18px; text-indent:5px;" placeholder="Enter your Username">
	</td>
</tr>
<tr>
	<td>
		<h2>Password</h2>
	</td>
	<td width="10">
	</td>
	<td>
		<input type="password" name="passWord" autofocus="autofocus" style="font-size:18px; text-indent:5px;" placeholder="Enter your Password">
	</td>
</tr>
<tr>
	<td colspan="3" style="text-align:center;">
	<br />
		<input type="button" value="Login" onclick= "tryToLogin()" name="Submit" style="margin-right:20px; border-radius:4px; background-color:skyblue; font-size:18px; cursor:pointer;">
		<input type="reset" value="Reset" style="font-size:18px; cursor:pointer; border-radius:4px; background-color:orange;">
	<br />
	<br />
	</td>
</tr>
</table>
 
</form>
 
</center>