Ajax Tutorial
- What is Ajax
- How Ajax Work
- ajax() and load() Function
- AJAX get() and post() Methods
- AJAX Function
- Ajax Success
- Ajax Button Click
- Ajax div load on button click
- Insert Data
- Delete Data
- User Registration
- ContactUs Form
- Check existing Password in Ajax and change the Password
- Ajax Search
- Ajax Serialize Insert
- Ajax without Searialize Insert
- Ajax User Check Availability
- Ajax OptionBox
- Ajax Dropdown Session
- dynamic text box Add/Remove
- Star Rating
- Pin Check Available
- Ajax Programs
- Clear Form Field after submitting form
- Loader load show / hide
- Multiple Functions
Customer Say
User Registration Using Ajax
Database
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;
When submit button is clicked, ajax function will be called with method as POST, url as ajax.php and sucess message.
You can donwload jquery.js file from here click here to Download jquery.js
Download User Registration zip files
File Name:- index.php
<html><head>
<title>User Registration Using PHP Ajax</title>
<script type="text/javascript" src="js/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>
File Name:- ajax.php
<?php$query=mysql_connect("localhost","root","");
mysql_select_db("ajax",$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 users values('','$username','$password','$email')");
if($query2)
{
echo "<h2>Your Registration Process succesfully completed. Thank You</h2>";
}
}
?> /****************** OR ********************/
<?php
$host = "localhost";
$username ="root";
$password = "";
$db_name = "vibrea";
$con = mysqli_connect($host,$username,$password)or die(mysqli_error());
mysqli_select_db($con,$db_name)or die(mysqli_error($con));
if(isset($_POST['username']) && isset($_POST['password']) && isset($_POST['email']))
{
$username=mysqli_real_escape_string($_POST['username']);
$password=mysqli_real_escape_string($_POST['password']);
$email=$_POST['email'];
$qry = "insert into users values('','$username','$password','$email')"; $query2=mysqli_query($con,$qry);
if($query2)
{
echo "<h2>Your Registration Process succesfully completed. Thank You</h2>";
}
}
?>
?>