Sign up and Login
Simple Sign up and Login script
by Gary Pyne
HTML
<div id="content">First Name
<input type="textbox" id="tbFirstName" onclick="" value="" />
<br />Last Name
<input type="textbox" id="tbLastName" onclick="" value="" />
<br />
<br />Username
<input type="textbox" id="textboxUsername" onclick="" value="" />
<br />Password
<input type="password" id="textboxPassword" onclick="" value="" />
<br />
<input type="button" onclick="signUp()" value="Sign Up" />
<input type="button" onclick="submit()" value="Submit" />
<input type="button" onclick="reset()" value="Reset" />
</div>
<div id="content2">
<input type="button" onclick="showMe()" value="Forgot Password" />
<br />
<br />
<div id="forgotU"></div>
<br />
<div id="forgotP"></div>
<br />
</div>
CSS
#content {
width:180px;
float:left;
font-family:verdana;
font-size:11px;
}
#content2 {
padding-top:10px;
padding-right:20px;
width:150px;
float:right;
font-family:verdana;
font-size:11px;
}
JavaScript
var i = 1;
var userName = "";
var password = "";
var userStored = "";
var passStored = "";
function reset() {
userName = "";
password = "";
userStored = "";
passStored = "";
clear();
document.getElementById("forgotU").textContent = ("");
document.getElementById("forgotP").textContent = ("");
}
function clear() {
document.getElementById("textboxUsername").value = ("");
document.getElementById("textboxPassword").value = ("");
document.getElementById("tbFirstName").value = ("");
document.getElementById("tbLastName").value = ("");
}
function signUp() {
if (document.getElementById("textboxUsername").value === ("") || document.getElementById("textboxPassword").value === ("")) {
alert("Please enter a valid Username and Password");
} else {
userStored = document.getElementById("textboxUsername").value;
passStored = document.getElementById("textboxPassword").value;
clear();
alert("Signed up");
}
}
function submit() {
while (i) {
userName = document.getElementById("textboxUsername").value;
password = document.getElementById("textboxPassword").value;
if (userStored === "" && passStored === "") {
alert("Incorrect, please try again");
break;
} else {
if (userName === userStored && password === passStored) {
alert("You have logged in!");
clear();
i = 0;
} else {
alert("Incorrect, please try again");
break;
}
}
}
i = 1;
}
function showMe() {
if (userStored === "" && passStored === "") {
alert("You have not Signed Up");
} else {
document.getElementById("forgotU").textContent = ("Username: " + userStored);
document.getElementById("forgotP").textContent = ("Password: " + passStored);
}
}