User Registration Using PHP Ajax

By | April 28, 2013

Already we are having an article about user registration. Here is the tutorial for user registration in php and ajax. User Registration in ajax makes registration of user without page refresh. By using ajax for registration process, USer interface will be good.

Here is the simple database structure which has fields id, username, password and email

 

User Registration Using PHP Ajax

User Registration Using PHP Ajax

Database
1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE `freeze`.`user` (
`id` INT( 3 ) NOT NULL AUTO_INCREMENT ,
`username` VARCHAR( 30 ) NOT NULL ,
`password` VARCHAR( 50 ) NOT NULL ,
`email` VARCHAR( 50 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = INNODB;

 

You can donwload jquery.js file from here  click here to Download jquery.js

index.php

Username, password and email field values from index.php page will be sent to ajax.php through ajax request, when we click on submit button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<html>
<head>
<title>User Registration Using PHP Ajax</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var username=$('#username').val();
var password=$('#password').val();
var password1=$('#password1').val();
var email=$('#email').val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "username="+username+"&password="+password+"&email="+email ,
success: function(html){
$("#load").css('display','block');
$("#form2").css('display','none');
$("#box").css('display','none');
$("#load").fadeOut('500', function(){
$("#load").css('display','none');
$("#box").html(html).show('slow');
});
}
});
return false;

});
});
</script>
</head>
<style type="text/css">
#load
{
display:none;
width:500px;
height:500px;
background:url(loading3.gif) no-repeat;
}
#line
{
margin:20px 0;
}
</style>
<body>
<div id="load" style="">
</div>
<div id="box">
</div>
<form method="post" action="" id="form2">
<div id="line">USERNAME: <input type="text" name="username" id="username" /></div>
<div id="line">PASSWORD:<input type="password" name="password" id="password" /></div>
<div id="line">EMAIL:<input type="text" name="email" id="email" /></div>
<input type="submit" id="submit" name="submit" />
</form>

</body>
</html>
ajax.php

The values sent from index.php will be processed here and values will be inserted into database. Output will be displayed in ajax.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
$query=mysql_connect("localhost","root","");
mysql_select_db("freeze",$query);
if(isset($_POST['username']) && isset($_POST['password']) && isset($_POST['email']))
{
$username=mysql_real_escape_string($_POST['username']);
$password=mysql_real_escape_string($_POST['password']);
$email=$_POST['email'];
$query2=mysql_query("insert into user values('','$username','$password','$email')");
if($query2)
{
echo "<h2>Your Registration Process succesfully completed. Thank You</h2>";
}
}
?>

4 thoughts on “User Registration Using PHP Ajax

  1. Pingback: Advance Password Strength Check Using jQuery | Freeze Coders

  2. Vipul

    Prasad Ji,

    getting this error after submitting

    Warning: mysql_connect(): Access denied for user ‘root’@'localhost’ (using password: NO) in C:\Ampps\www\Chrome\register\ajax.php on line 2

    Warning: mysql_select_db() expects parameter 2 to be resource, boolean given in C:\Ampps\www\Chrome\register\ajax.php on line 3

    Reply
    1. prasad k Post author

      Hi vipul,
      Database connection string parameters are wrong in your case. Please have a look at that

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *