<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<link rel="stylesheet" type="text/css" href="../css/default_style.css">
<link rel="stylesheet" type="text/css" href="../css/login.css">
</head>
<body>
<div id="sign_up_frame" class="frame">
<h1>-- Sign up --</h1>
<div>
<p id="error_signup" style="text-align: center;"></p>
<form name="sign_up" method="post" action="sign_up.php" onsubmit="return validate_password();">
Your name*
<input type="text" name="full_name">
Username*
<input type="text" name="username" onkeyup="checkAvailability(this.name,this.value)"><label id="username_verification"></label></br>
Email*
<input type="Email" name="user_email"onkeyup="checkAvailability(this.name,this.value)"><label id="email_verification"></label></br>
Password*
<input type="Password" name="user_password"><br/>
Confirm password*
<input type="Password" name="confirm_password"><br/>
Phone number*
<input type="text" name="user_phone"><br/>
<input type="button" value="Sign me up as driver" id="signAs_driver" style="width : 40%" onclick= "driver_signup();"><label id="driversign_status"><br></label>
<input type="text" name="is_driver" value="No" style="display:none">
<input type="submit" value="REGISTER">
</form>
<p><br>* Required field</p>
</div>
</div>
<script>
function validate_password()
{
var password = document.sign_up.user_password.value;
var confirm_password = document.sign_up.confirm_password.value;
if (password !== confirm_password)
{
window.alert("The passwords you entered didn't match");
return false;
}
}
function driver_signup()
{
document.getElementById("driversign_status").innerHTML= "Signed as driver";
document.getElementById("signAs_driver").style.display = "none";
document.sign_up.is_driver.value = "Yes";
}
function checkAvailability(name,value)
{
xhttp = new XMLHttpRequest();
if (value.length == 0) {
document.getElementById("username_verification").innerHTML = "";
document.getElementById("email_verification").innerHTML = "";
return;
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if (name === "username") {
document.getElementById("username_verification").innerHTML = this.responseText;
} else if (name === "user_email") {
document.getElementById("email_verification").innerHTML = this.responseText;
}
}
};
var str = name+"="+value;
xhttp.open("GET", "sign_up.php?key="+str, true);
xhttp.send();
}
</script>
</body>
</html>