In this tutorial I will show, How to make Signup form with Ajax, jQuery using PHP PDO_MySQL.
Jquery form Validation
First we need to setup Database.
Lets create the DB called signup_db.
add a table called users. The users table will have the following columns
Create index.html page and copy paste following code.
Create config.php file for database connection.
First we need to setup Database.
Lets create the DB called signup_db.
add a table called users. The users table will have the following columns
- id
- username
- password
- status
- created_at
- updated_at
Create index.html page and copy paste following code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Signup Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
</head>
<body>
<div class="container">
<h2>Signup form</h2>
<form class="form-horizontal" action="#" enctype="application/x-www-form-urlencoded" id="signup_form" method="POST" accept-charset="utf-8" role="form" novalidate="true">
<div class="form-group">
<label class="control-label col-sm-2" for="username">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter Username" name="username">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="password">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" name="signup" value="Signup">
</div>
</div>
<div class="form-group col-sm-offset-2 col-sm-10" id="message" style="display:none;">
</div>
</form>
</div>
<style type="text/css">
.label {
width: 100px;
text-align: right;
float: left;
padding-right: 10px;
}
#signup_form label.error, .output {
color: #FB3A3A;
font-family:"Segoe UI";
font-size:13px;
margin-top:-10px;
}
</style>
<script type="text/javascript">
$("#loading").hide();
// When the browser is ready...
$(document).ready(function(){
// Setup form validation on the #signup element
$("#signup_form").validate({
// Specify the validation rules
rules: {
username: {
required: true
},
email: {
required: true,
email: true
},
password: {
required: true
}
},
// Specify the validation error messages
messages: {
username: {
required: "Please enter Username"
},
email: {
required: "Please enter your email",
email: "Please enter a valid email"
},
password: {
required: "Please enter password"
}
},
submitHandler: function (form) {
$("#loading").show();
$.ajax({
type: 'POST',
dataType:'JSON',
url: 'signup_process.php',
data: $('#signup_form').serialize(),
success: function (json_data) {
var msg = json_data.msg;
var flag = json_data.flag;
if (flag == 1) {
$("#loading").hide();
$("#message").html(msg).show();
$("#signup_form").trigger('reset');
} else {
$("#message").html(msg).show();
$("#signup_form").trigger('reset');
}
}
});
}
});
});
</script>
</body>
</html>
Create config.php file for database connection.
<?php $servername = "localhost"; $username = "root"; $password = ""; try { $conn = new PDO("mysql:host=$servername;dbname=signup_db", $username, $password); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); } ?>
Create signup_process.php to get value of all fields from registration form.
<?php //start php tag
//include config.php page for database connection
include('config.php');
if(isset($_POST['signup'])){
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
if(empty($username)){
echo json_encode(array('flag'=>0, 'msg'=>'Please enter username'));
die();
}else if(empty($email)){
echo json_encode(array('flag'=>0, 'msg'=>'Please enter email'));
die();
}else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
echo json_encode(array('flag'=>0, 'msg'=>'Please enter valid email'));
die();
}else if(empty($password)){
echo json_encode(array('flag'=>0, 'msg'=>'Please enter password'));
die();
}else{
$encrypted_password = sha1($password);
$created_at = date('Y-m-d H:i:s');
$status = 1;
$insert_user = $conn->prepare("INSERT INTO users(username, email, password, created_at, status)VALUES(:username, :email, :password, :created_at, :status)");
$insert_user->bindParam(':username', $username);
$insert_user->bindParam(':email', $email);
$insert_user->bindParam(':password', $encrypted_password);
$insert_user->bindParam(':created_at', $created_at);
$insert_user->bindParam(':status', $status);
$insert_user->execute();
$is_inserted = $conn->lastInsertId();
if($is_inserted>0){
echo json_encode(array('flag'=>1, 'msg'=>'User inserted successfully'));
die();
}else{
echo json_encode(array('flag'=>0, 'msg'=>'Failed to inserted'));
die();
}
}
}
?>
Comments
Post a Comment