Grad Assignment 4

Creating a form using Ajax and jQuery

by Larry Adams

HTML

<title>AJAX and jQuery Assignment</title>

<div class="container">
<div class="main">
    <h1>Graduate Assignment 4</h1>
<form class="form" method="post" action="#">
<h2>Registration Form Using Ajax and jQuery</h2>
<label>Username :</label><br>
<input type="text" username="username" id="username"><br><br>
<label>Email :</label><br>
<input type="text" name="email" id="email"><br><br>
<label>Password :</label><br>
<input type="password" name="password" id="password"><br><br>
<label>Confirm Password :</label><br>
<input type="password" name="cpassword" id="cpassword"><br><br>
<input type="button" name="register" id="register" value="Register">
</form>
</div>

CSS

/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

h1{
text-align: center;
font-size: 28px;
color: white;
}
h2{
text-align: center;
font-size: 22px;
color:white;
}
hr{
margin-bottom: 20px;
}
div.container{
width: 960px;
height: 610px;
margin: 30px auto;
font-family: 'Droid Serif', serif;
position:relative;
}
div.main{
width: 320px;
float:left;
padding: 10px 55px 40px;
background-color: #003366;
border: 15px solid white;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
}
input[type=text],[type=password] {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px #00F5FF;
border: 2px solid #00F5FF;
color: #4f4f4f;
font-size: 16px;
}
label{
color: white;
font-size: 14px;
font-weight: bold;
}
#register {
font-size: 20px;
margin-top: 15px;
background: linear-gradient(#22abe9 5%, #36caf0 100%);
border: 1px solid #0F799E;
padding: 7px 35px;
color: white;
text-shadow: 0px 1px 0px #13506D;
font-weight: bold;
border-radius: 2px;
cursor: pointer;
width: 100%;
}
#register:hover{
background: linear-gradient(#36caf0 5%, #22abe9 100%);
}

JavaScript

$(document).ready(function() {
$("#registration").click(function() {
var username = $("#username").val();
var email = $("#email").val();
var password = $("#password").val();
var confirm = $("#confirm").val();
if (username == '' || email == '' || password == '' || confirm == '') {
alert("You MUST complete all fields!");
} else if ((password.length) < 8) {
alert("Password should atleast 8 character in length...!!!!!!");
} else if (!(password).match(confirm)) {
alert("Your passwords don't match. Try again?");
} else {
$.post("registration.php", {
name1: name,
email1: email,
password1: password
}, function(data) {
if (data == 'You have Successfully Sign up!') {
$("form")[0].reset();
}
alert(data);
});
}
});
});