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
[code type=html]
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;
[/code]
You can donwload jquery.js file from here click here to Download jquery.js
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.
[code type=html]
<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>
[/code]
The values sent from index.php will be processed here and values will be inserted into database. Output will be displayed in ajax.php
[code type=php]
<?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>”;
}
}
?>
[/code]
Pingback: Advance Password Strength Check Using jQuery | Freeze Coders
Love this tutorial, thank u Prasad. keep it up and make more tutorial
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
Hi vipul,
Database connection string parameters are wrong in your case. Please have a look at that