4 Steps to Create AJAX CRUD Application in PHP & MySQL

This is simple AJAX CRUD application built with AJAX using PHP & MySQL. This tutorial is an extension to our simple crud application in PHP & MySQL. I’m using that same code for this application and adding ajax features.

Below is simple AJAX code snippet to send and receive data from PHP file. I’m sending data to PHP file using get method from HTML file. This submitted data will be displayed in HTML file without reloading HTML file.

Save this code as sample.html

<!DOCTYPE html>
<html>
<head>
	<title>Simple AJAX Code Snippet</title>
</head>
<body>
<button>Click Me</button>
<div id="result">This is result div</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple AJAX Code Snippet</title>

</head>

<body>

<button>Click Me</button>

<div id="result">This is result div</div>

</body>

</html>

Add this code inside head section. In this below code I’m sending some data to data.php file using get method. Upon getting successful data from data.php replacing it with result id inside our HTML file. All this will be done without reloading sample.html file.

<script type="text/javascript">
	function ajax(){
		var xmlhttp = new XMLHttpRequest();

		xmlhttp.onreadystatechange = function () {
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				var result = document.getElementById('result');
				result.innerHTML = xmlhttp.responseText;
			}
		}

		xmlhttp.open('GET', 'data.php?name=vivek', true);
		xmlhttp.send();
	}
</script>

function ajax(){

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function () {

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

var result = document.getElementById('result');

result.innerHTML = xmlhttp.responseText;

}

xmlhttp.open('GET', 'data.php?name=vivek', true);

xmlhttp.send();

}

</script>

Add this onclick function to button inside body section

<button onclick="ajax();">Click Me</button>

1	<button onclick="ajax();">Click Me</button>

Add this PHP code into data.php. This file is used to send and receive data in our HTML document.

<?php
	echo "Name of the person is " .$_REQUEST['name'];
?>

<?php

echo "Name of the person is " .$_REQUEST['name'];

In our main AJAX CRUD application using PHP & MySQL. I’m going to use this concept to send & receive the data in html & php files.

1. AJAX Read Operation in PHP & MySQL

Create a html file with the name index.html use this basic html with bootstrap css cdn files, bootstrap js cdn files & jQuery cdn file. I’m using CDN, if you want you can download it to local computer and use it.

<!DOCTYPE html>
<html>
<head>
	<title>Simple AJAX CRUD Application in PHP & MySQL</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
	 
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
	 
	<link rel="stylesheet" href="styles.css" >
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	 
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body >

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Simple AJAX CRUD Application in PHP & MySQL</title>

</head>

<body >

</body>

</html>

Inside body section, use this form code to display form & submiting values to php file for CRUD operations.

<div class="container">
	<div class="row" id="edit">
		<form class="form-horizontal col-md-6 col-md-offset-3">
		<h2>Create Operation in CRUD Application</h2>
			<div class="form-group">
			    <label for="input1" class="col-sm-2 control-label">First Name</label>
			    <div class="col-sm-10">
			      <input type="text" id="fname"  class="form-control" placeholder="First Name" />
			    </div>
			</div>

			<div class="form-group">
			    <label for="input1" class="col-sm-2 control-label">Last Name</label>
			    <div class="col-sm-10">
			      <input type="text" id="lname"  class="form-control" placeholder="Last Name" />
			    </div>
			</div>

			<div class="form-group">
			    <label for="input1" class="col-sm-2 control-label">E-Mail</label>
			    <div class="col-sm-10">
			      <input type="email" id="email"  class="form-control" placeholder="E-Mail" />
			    </div>
			</div>

			<div class="form-group" class="radio">
			<label for="input1" class="col-sm-2 control-label">Gender</label>
			<div class="col-sm-10">
			  <label>
			    <input type="radio" id="gender" value="male"> Male
			  </label>
			  	  <label>
			    <input type="radio" id="gender" value="female"> Female
			  </label>
			</div>
			</div>

			<div class="form-group">
			<label for="input1" class="col-sm-2 control-label">Age</label>
			<div class="col-sm-10">
				<select id="age" class="form-control">
					<option value="">Select Your Age</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
				</select>
			</div>
			</div>
			<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" />
		</form>

	</div>
</div>

<h2>Create Operation in CRUD Application</h2>

<label for="input1" class="col-sm-2 control-label">First Name</label>

</div>

</div>

</div>

<label for="input1" class="col-sm-2 control-label">Gender</label>

<label>

<input type="radio" id="gender" value="male"> Male

</label>

<label>

<input type="radio" id="gender" value="female"> Female

</label>

</div>

<option value="">Select Your Age</option>

</select>

</div>

</form>

</div>

Use the code in script tags from our first sample.html file

<script type="text/javascript">
	function ajax(){

		var xmlhttp = new XMLHttpRequest();
		
		xmlhttp.onreadystatechange = function () {
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				var result = document.getElementById('result');
				result.innerHTML = xmlhttp.responseText;
			}
		}

		xmlhttp.open('GET', 'ajax.php',true);
		xmlhttp.send();
	}

</script>

function ajax(){

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function () {

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

var result = document.getElementById('result');

result.innerHTML = xmlhttp.responseText;

}

xmlhttp.open('GET', 'ajax.php',true);

xmlhttp.send();

}

</script>

Right after form closing div in index.html add this table code.

<div class="row">
	<table class="table "> 
		<thead> 
			<tr> 
				<th>#</th> 
				<th>Full Name</th> 
				<th>E-Mail</th> 
				<th>Age</th> 
				<th>Gender</th> 
				<th>Extras</th>
			</tr> 
		</thead> 
		<tbody id="result"> 

		</tbody> 
	</table>
</div>

<thead>

<tr>

<th>Gender</th>

<th>Extras</th>

</tr>

</thead>

</tbody>

</table>

</div>

Here using ajax.php file, I’m replacing tbody #result id with the output from ajax.php file.
Code of ajax.php file.

<?php
require_once('connect.php');

$ReadSql = "SELECT * FROM `crud`";
$res = mysqli_query($connection, $ReadSql);
?>
<tbody> 
<?php 
while($r = mysqli_fetch_assoc($res)){
?>
<tr> 
	<th scope="row"><?php echo $r['id']; ?></th> 
	<td><?php echo $r['first_name'] . " " . $r['last_name']; ?></td> 
	<td><?php echo $r['email_id']; ?></td> 
	<td><?php echo $r['gender']; ?></td> 
	<td><?php echo $r['age']; ?></td> 
	<td>
		<a href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>

		<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal<?php echo $r['id']; ?>">Delete</button>

		<!-- Modal -->
		  <div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog">
		    <div class="modal-dialog">
		    
		      <!-- Modal content-->
		      <div class="modal-content">
		        <div class="modal-header">
		          <button type="button" class="close" data-dismiss="modal">&times;</button>
		          <h4 class="modal-title">Delete File</h4>
		        </div>
		        <div class="modal-body">
		          <p>Are you sure?</p>
		        </div>
		        <div class="modal-footer">
		          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
		          <a href="#"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a>
		        </div>
		      </div>
		      
		    </div>
		  </div>

	</td>
</tr> 
<?php } ?>
</tbody>

<?php

require_once('connect.php');

$ReadSql = "SELECT * FROM `crud`";

$res = mysqli_query($connection, $ReadSql);

<tbody>

<?php

while($r = mysqli_fetch_assoc($res)){

<tr>

<td>

<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal<?php echo $r['id']; ?>">Delete</button>

<div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog">

<h4 class="modal-title">Delete File</h4>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

<a href="#"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a>

</div>

</td>

</tr>

<?php } ?>

</tbody>

Create connect.php file for connecting to database in PHP. I’m already including this file in ajax.php file. If you haven’t created database table, follow this tutorial Simple CRUD Application in PHP & MySQL.

<?php
$connection = mysqli_connect('localhost', 'root', '');
if (!$connection){
    die("Database Connection Failed" . mysqli_error($connection));
}
$select_db = mysqli_select_db($connection, 'project');
if (!$select_db){
    die("Database Selection Failed" . mysqli_error($connection));
}

<?php

$connection = mysqli_connect('localhost', 'root', '');

if (!$connection){

die("Database Connection Failed" . mysqli_error($connection));

}

$select_db = mysqli_select_db($connection, 'project');

if (!$select_db){

die("Database Selection Failed" . mysqli_error($connection));

}

To update table data using ajax use this code to opening body tag. That is executing ajax function while onload.

<body onload="ajax();">

1	<body onload="ajax();">

After adding above line of code, you can see the difference. That is table body will be loaded after loading html file.

2. AJAX Create Operation in PHP & MySQL

Create Operation means inserting data into database table.
Add this onclick code to submit button.

onclick="ajax('create'); return false;"

1	onclick="ajax('create'); return false;"

Next get the input fields values using this below code

var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var email = document.getElementById('email').value;
var gender = document.getElementById('gender').value;
var age = document.getElementById('age').value;

var fname = document.getElementById('fname').value;

var lname = document.getElementById('lname').value;

var email = document.getElementById('email').value;

var gender = document.getElementById('gender').value;

var age = document.getElementById('age').value;

Add also pass the operation mode in ajax function using this line of code

<script type="text/javascript">
	function ajax(operation, id){
        }
</script>

function ajax(operation, id){

}

</script>

Add this code right after defining the variables.

if(operation == undefined){
	operation = '';
	id = '';
}else if(operation == 'create'){
	id == '';
}
if(fname == ''){
	fname = '';
}
if(lname == ''){
	lname = '';
}
if(email == ''){
	email = '';
}
if(gender == ''){
	gender = '';
}
if(age == ''){
	age = '';
}

if(operation == undefined){

operation = '';

id = '';

}else if(operation == 'create'){

id == '';

}

if(fname == ''){

fname = '';

}

if(lname == ''){

lname = '';

}

if(email == ''){

email = '';

}

if(gender == ''){

gender = '';

}

if(age == ''){

age = '';

}

Send the varible values using get method

xmlhttp.open('GET', 'ajax.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);

1	xmlhttp.open('GET', 'ajax.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);

Add this code in ajax.php file to insert submitted data in database table.

if($_REQUEST['operation'] != ''){
	if($_REQUEST['operation'] == 'create'){
		$fname = $_REQUEST['fname'];
		$lname = $_REQUEST['lname'];
		$email = $_REQUEST['email'];
		$gender = $_REQUEST['gender'];
		$age = $_REQUEST['age'];
		$CreateSql = "INSERT INTO `crud` (first_name, last_name, email_id, gender, age) VALUES ('$fname', '$lname', '$email', '$gender', '$age')";
		$res = mysqli_query($connection, $CreateSql) or die(mysqli_error($connection));
	}
}

if($_REQUEST['operation'] != ''){

if($_REQUEST['operation'] == 'create'){

$fname = $_REQUEST['fname'];

$lname = $_REQUEST['lname'];

$email = $_REQUEST['email'];

$gender = $_REQUEST['gender'];

$age = $_REQUEST['age'];

$CreateSql = "INSERT INTO `crud` (first_name, last_name, email_id, gender, age) VALUES ('$fname', '$lname', '$email', '$gender', '$age')";

$res = mysqli_query($connection, $CreateSql) or die(mysqli_error($connection));

}

3. AJAX Delete Operation in PHP & MySQL

First of all, add this onclick code to delete button in bootstrap popup modal inside ajax.php file.

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="javascript:void(0);" onclick="ajax('delete', <?php echo $r['id']; ?>);"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a>

1 2	<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a href="javascript:void(0);" onclick="ajax('delete', <?php echo $r['id']; ?>);"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a>

Then add this code to delete record from database table.

if($_REQUEST['operation'] == 'delete'){
	$id = $_REQUEST['id'];
	$DelSql = "DELETE FROM `crud` WHERE id=$id";
	$res = mysqli_query($connection, $DelSql);
}

if($_REQUEST['operation'] == 'delete'){

$id = $_REQUEST['id'];

$DelSql = "DELETE FROM `crud` WHERE id=$id";

$res = mysqli_query($connection, $DelSql);

}

4. AJAX Edit Operation in PHP & MySQL

For edit operation, I’m creating a new function ajax_edit. This function accepts two arguments one is operation same way we used for previous function and the anothe argument is id. which is used update the record.

This is simple code, I’m using from sample.html file.

function ajax_edit(operation, id){

	var xmlhttp = new XMLHttpRequest();
	
	xmlhttp.onreadystatechange = function () {
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			var edit = document.getElementById('edit');
			edit.innerHTML = xmlhttp.responseText;
		}
	}

	xmlhttp.open('GET', 'edit.php',true);
	xmlhttp.send();
}

function ajax_edit(operation, id){

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function () {

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

var edit = document.getElementById('edit');

edit.innerHTML = xmlhttp.responseText;

}

xmlhttp.open('GET', 'edit.php',true);

xmlhttp.send();

}

Create one more file edit.php & use this code. This code will display form with data fetched from database table.

<?php
require_once('connect.php');
//if($_REQUEST['operation'] == 'edit'){
$id = $_REQUEST['id'];
$SelSql = "SELECT * FROM `crud` WHERE id=$id";
$res = mysqli_query($connection, $SelSql);
$r = mysqli_fetch_assoc($res);

?>
<form method="post" class="form-horizontal col-md-6 col-md-offset-3">
<h2>UPDATE Operation in CRUD Application</h2>
	<div class="form-group">
	    <label for="input1" class="col-sm-2 control-label">First Name</label>
	    <div class="col-sm-10">
	      <input type="text" id="fname"  class="form-control" value="<?php echo $r['first_name']; ?>" placeholder="First Name" />
	    </div>
	</div>

	<div class="form-group">
	    <label for="input1" class="col-sm-2 control-label">Last Name</label>
	    <div class="col-sm-10">
	      <input type="text" id="lname"  class="form-control" value="<?php echo $r['last_name']; ?>" placeholder="Last Name" />
	    </div>
	</div>

	<div class="form-group">
	    <label for="input1" class="col-sm-2 control-label">E-Mail</label>
	    <div class="col-sm-10">
	      <input type="email" id="email"  class="form-control" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" />
	    </div>
	</div>

	<div class="form-group" class="radio">
	<label for="input1" class="col-sm-2 control-label">Gender</label>
	<div class="col-sm-10">
	  <label>
	    <input type="radio" id="gender" value="male" <?php if($r['gender'] == 'male'){ echo "checked";} ?>> Male
	  </label>
	  	  <label>
	    <input type="radio" id="gender" value="female" <?php if($r['gender'] == 'female'){ echo "checked";} ?>> Female
	  </label>
	</div>
	</div>

	<div class="form-group">
	<label for="input1" class="col-sm-2 control-label">Age</label>
	<div class="col-sm-10">
		<select id="age" class="form-control">
			<option>Select Your Age</option>
			<option value="20" <?php if($r['age'] == '20'){ echo "selected";} ?> >20</option>
			<option value="21" <?php if($r['age'] == '21'){ echo "selected";} ?> >21</option>
			<option value="22" <?php if($r['age'] == '22'){ echo "selected";} ?> >22</option>
			<option value="23" <?php if($r['age'] == '23'){ echo "selected";} ?> >23</option>
			<option value="24" <?php if($r['age'] == '24'){ echo "selected";} ?> >24</option>
			<option value="25" <?php if($r['age'] == '25'){ echo "selected";} ?> >25</option>
		</select>
	</div>
	</div>
	<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="Update" />
</form>

<?php

require_once('connect.php');

//if($_REQUEST['operation'] == 'edit'){

$id = $_REQUEST['id'];

$SelSql = "SELECT * FROM `crud` WHERE id=$id";

$res = mysqli_query($connection, $SelSql);

$r = mysqli_fetch_assoc($res);

<h2>UPDATE Operation in CRUD Application</h2>

<label for="input1" class="col-sm-2 control-label">First Name</label>

<input type="text" id="fname" class="form-control" value="<?php echo $r['first_name']; ?>" placeholder="First Name" />

</div>

<input type="text" id="lname" class="form-control" value="<?php echo $r['last_name']; ?>" placeholder="Last Name" />

</div>

<input type="email" id="email" class="form-control" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" />

</div>

<label for="input1" class="col-sm-2 control-label">Gender</label>

<label>

<input type="radio" id="gender" value="male" <?php if($r['gender'] == 'male'){ echo "checked";} ?>> Male

</label>

<label>

<input type="radio" id="gender" value="female" <?php if($r['gender'] == 'female'){ echo "checked";} ?>> Female

</label>

</div>

<option>Select Your Age</option>

</select>

</div>

</form>

To load this edit.php file inside our index.html add the id #edit to div opening tag that is before opening form tag. I’ve added this in above index.html code.

Next executing ajax function after clicking on edit button in HTML table. Replace this code with edit anchor link.

<a href="javascript:void(0);" onclick="ajax_edit('edit', <?php echo $r['id']; ?>);"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>

1	<a href="javascript:void(0);" onclick="ajax_edit('edit', <?php echo $r['id']; ?>);"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>

Till now form is loading with values from database, next step is to update these submitted values in database.

Add this on click function to form submit button in edit.php file

onclick="ajax_edit('update', <?php echo $r['id']; ?>); return false;"

1	onclick="ajax_edit('update', <?php echo $r['id']; ?>); return false;"

Add this code in ajax_edit function in index.html file, to get input field values.

if(operation == 'edit'){

}else if(operation == 'update'){
	var fname = document.getElementById('fname').value;
	var lname = document.getElementById('lname').value;
	var email = document.getElementById('email').value;
	var gender = document.getElementById('gender').value;
	var age = document.getElementById('age').value;
}

if(operation == 'edit'){

}else if(operation == 'update'){

var fname = document.getElementById('fname').value;

var lname = document.getElementById('lname').value;

var email = document.getElementById('email').value;

var gender = document.getElementById('gender').value;

var age = document.getElementById('age').value;

}

Add these variable values in get method for sending data to edit.php file.

xmlhttp.open('GET', 'edit.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);

1	xmlhttp.open('GET', 'edit.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);

Add this code in edit.php file.

if($_REQUEST['operation'] == 'update'){
	$id = $_REQUEST['id'];
	$fname = mysql_real_escape_string($_REQUEST['fname']);
	$lname = mysql_real_escape_string($_REQUEST['lname']);
	$email = mysql_real_escape_string($_REQUEST['email']);
	$gender = $_REQUEST['gender'];
	$age = $_REQUEST['age'];

	$UpdateSql = "UPDATE `crud` SET first_name='$fname', last_name='$lname', gender='$gender', age=$age, email_id='$email' WHERE id=$id";
	$res = mysqli_query($connection, $UpdateSql);
}

if($_REQUEST['operation'] == 'update'){

$id = $_REQUEST['id'];

$fname = mysql_real_escape_string($_REQUEST['fname']);

$lname = mysql_real_escape_string($_REQUEST['lname']);

$email = mysql_real_escape_string($_REQUEST['email']);

$gender = $_REQUEST['gender'];

$age = $_REQUEST['age'];

$UpdateSql = "UPDATE `crud` SET first_name='$fname', last_name='$lname', gender='$gender', age=$age, email_id='$email' WHERE id=$id";

$res = mysqli_query($connection, $UpdateSql);

}

Complete Code of AJAX CRUD Application in PHP & MySQL

If you are having any problem arragning above pieces of code, you can use this complete code.
[sociallocker]

connect.php

<?php
$connection = mysqli_connect('localhost', 'root', '');
if (!$connection){
    die("Database Connection Failed" . mysqli_error($connection));
}
$select_db = mysqli_select_db($connection, 'project');
if (!$select_db){
    die("Database Selection Failed" . mysqli_error($connection));
}

<?php

$connection = mysqli_connect('localhost', 'root', '');

if (!$connection){

die("Database Connection Failed" . mysqli_error($connection));

}

$select_db = mysqli_select_db($connection, 'project');

if (!$select_db){

die("Database Selection Failed" . mysqli_error($connection));

}

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Simple AJAX CRUD Application in PHP & MySQL</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
 
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
 
<link rel="stylesheet" href="styles.css" >
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		function ajax(operation, id){
			var fname = document.getElementById('fname').value;
			var lname = document.getElementById('lname').value;
			var email = document.getElementById('email').value;
			var gender = document.getElementById('gender').value;
			var age = document.getElementById('age').value;
			if(operation == undefined){
				operation = '';
				id = '';
			}else if(operation == 'create'){
				id == '';
			}
			if(fname == ''){
				fname = '';
			}
			if(lname == ''){
				lname = '';
			}
			if(email == ''){
				email = '';
			}
			if(gender == ''){
				gender = '';
			}
			if(age == ''){
				age = '';
			}
			var xmlhttp = new XMLHttpRequest();
			
			xmlhttp.onreadystatechange = function () {
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
					var result = document.getElementById('result');
					result.innerHTML = xmlhttp.responseText;
				}
			}

			xmlhttp.open('GET', 'ajax.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);
			xmlhttp.send();
		}

		function ajax_edit(operation, id){
			if(operation == 'edit'){

			}else if(operation == 'update'){
				var fname = document.getElementById('fname').value;
				var lname = document.getElementById('lname').value;
				var email = document.getElementById('email').value;
				var gender = document.getElementById('gender').value;
				var age = document.getElementById('age').value;
			}

			var xmlhttp = new XMLHttpRequest();
			
			xmlhttp.onreadystatechange = function () {
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
					var edit = document.getElementById('edit');
					edit.innerHTML = xmlhttp.responseText;
				}
			}

			xmlhttp.open('GET', 'edit.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);
			xmlhttp.send();
		}
	</script>

</head>
<body onload="ajax();">
<div class="container">
	<div class="row" id="edit">
		<form class="form-horizontal col-md-6 col-md-offset-3">
		<h2>Create Operation in CRUD Application</h2>
			<div class="form-group">
			    <label for="input1" class="col-sm-2 control-label">First Name</label>
			    <div class="col-sm-10">
			      <input type="text" id="fname"  class="form-control" placeholder="First Name" />
			    </div>
			</div>

			<div class="form-group">
			    <label for="input1" class="col-sm-2 control-label">Last Name</label>
			    <div class="col-sm-10">
			      <input type="text" id="lname"  class="form-control" placeholder="Last Name" />
			    </div>
			</div>

			<div class="form-group">
			    <label for="input1" class="col-sm-2 control-label">E-Mail</label>
			    <div class="col-sm-10">
			      <input type="email" id="email"  class="form-control" placeholder="E-Mail" />
			    </div>
			</div>

			<div class="form-group" class="radio">
			<label for="input1" class="col-sm-2 control-label">Gender</label>
			<div class="col-sm-10">
			  <label>
			    <input type="radio" id="gender" value="male"> Male
			  </label>
			  	  <label>
			    <input type="radio" id="gender" value="female"> Female
			  </label>
			</div>
			</div>

			<div class="form-group">
			<label for="input1" class="col-sm-2 control-label">Age</label>
			<div class="col-sm-10">
				<select id="age" class="form-control">
					<option value="">Select Your Age</option>
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
					<option value="23">23</option>
					<option value="24">24</option>
					<option value="25">25</option>
				</select>
			</div>
			</div>
			<!-- <a class="btn btn-primary" onclick="ajax();" >Get View Data</a> -->
			<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" onclick="ajax('create'); return false;"/>
		</form>

	</div>

	<div class="row">

				<table class="table "> 
		<thead> 
			<tr> 
				<th>#</th> 
				<th>Full Name</th> 
				<th>E-Mail</th> 
				<th>Age</th> 
				<th>Gender</th> 
				<th>Extras</th>
			</tr> 
		</thead> 
		<tbody id="result"> 

		</tbody> 
		</table>

	</div>
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

<!DOCTYPE html>

<html>

<head>

<title>Simple AJAX CRUD Application in PHP & MySQL</title>

function ajax(operation, id){

var fname = document.getElementById('fname').value;

var lname = document.getElementById('lname').value;

var email = document.getElementById('email').value;

var gender = document.getElementById('gender').value;

var age = document.getElementById('age').value;

if(operation == undefined){

operation = '';

id = '';

}else if(operation == 'create'){

id == '';

}

if(fname == ''){

fname = '';

}

if(lname == ''){

lname = '';

}

if(email == ''){

email = '';

}

if(gender == ''){

gender = '';

}

if(age == ''){

age = '';

}

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function () {

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

var result = document.getElementById('result');

result.innerHTML = xmlhttp.responseText;

}

xmlhttp.open('GET', 'ajax.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);

xmlhttp.send();

}

function ajax_edit(operation, id){

if(operation == 'edit'){

}else if(operation == 'update'){

var fname = document.getElementById('fname').value;

var lname = document.getElementById('lname').value;

var email = document.getElementById('email').value;

var gender = document.getElementById('gender').value;

var age = document.getElementById('age').value;

}

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function () {

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

var edit = document.getElementById('edit');

edit.innerHTML = xmlhttp.responseText;

}

xmlhttp.open('GET', 'edit.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true);

xmlhttp.send();

}

</script>

</head>

<h2>Create Operation in CRUD Application</h2>

<label for="input1" class="col-sm-2 control-label">First Name</label>

</div>

</div>

</div>

<label for="input1" class="col-sm-2 control-label">Gender</label>

<label>

<input type="radio" id="gender" value="male"> Male

</label>

<label>

<input type="radio" id="gender" value="female"> Female

</label>

</div>

<option value="">Select Your Age</option>

</select>

</div>

</form>

</div>

<thead>

<tr>

<th>Gender</th>

<th>Extras</th>

</tr>

</thead>

</tbody>

</table>

</div>

</body>

</html>

ajax.php

<?php
require_once('connect.php');
if($_REQUEST['operation'] != ''){
	if($_REQUEST['operation'] == 'create'){
		$fname = $_REQUEST['fname'];
		$lname = $_REQUEST['lname'];
		$email = $_REQUEST['email'];
		$gender = $_REQUEST['gender'];
		$age = $_REQUEST['age'];
		$CreateSql = "INSERT INTO `crud` (first_name, last_name, email_id, gender, age) VALUES ('$fname', '$lname', '$email', '$gender', '$age')";
		$res = mysqli_query($connection, $CreateSql) or die(mysqli_error($connection));
	}
	if($_REQUEST['operation'] == 'delete'){
		$id = $_REQUEST['id'];
		$DelSql = "DELETE FROM `crud` WHERE id=$id";
		$res = mysqli_query($connection, $DelSql);
	}
}

$ReadSql = "SELECT * FROM `crud`";
$res = mysqli_query($connection, $ReadSql);
?>
<tbody> 
<?php 
while($r = mysqli_fetch_assoc($res)){
?>
	<tr> 
		<th scope="row"><?php echo $r['id']; ?></th> 
		<td><?php echo $r['first_name'] . " " . $r['last_name']; ?></td> 
		<td><?php echo $r['email_id']; ?></td> 
		<td><?php echo $r['gender']; ?></td> 
		<td><?php echo $r['age']; ?></td> 
		<td>
			<a href="javascript:void(0);" onclick="ajax_edit('edit', <?php echo $r['id']; ?>);"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>

			<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal<?php echo $r['id']; ?>">Delete</button>

			<!-- Modal -->
			  <div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog">
			    <div class="modal-dialog">
			    
			      <!-- Modal content-->
			      <div class="modal-content">
			        <div class="modal-header">
			          <button type="button" class="close" data-dismiss="modal">&times;</button>
			          <h4 class="modal-title">Delete File</h4>
			        </div>
			        <div class="modal-body">
			          <p>Are you sure?</p>
			        </div>
			        <div class="modal-footer">
			          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
			          <a href="javascript:void(0);" onclick="ajax('delete', <?php echo $r['id']; ?>);"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a>
			        </div>
			      </div>
			      
			    </div>
			  </div>
		</td>
	</tr> 
<?php } ?>
</tbody>

<?php

require_once('connect.php');

if($_REQUEST['operation'] != ''){

if($_REQUEST['operation'] == 'create'){

$fname = $_REQUEST['fname'];

$lname = $_REQUEST['lname'];

$email = $_REQUEST['email'];

$gender = $_REQUEST['gender'];

$age = $_REQUEST['age'];

$CreateSql = "INSERT INTO `crud` (first_name, last_name, email_id, gender, age) VALUES ('$fname', '$lname', '$email', '$gender', '$age')";

$res = mysqli_query($connection, $CreateSql) or die(mysqli_error($connection));

}

if($_REQUEST['operation'] == 'delete'){

$id = $_REQUEST['id'];

$DelSql = "DELETE FROM `crud` WHERE id=$id";

$res = mysqli_query($connection, $DelSql);

}

$ReadSql = "SELECT * FROM `crud`";

$res = mysqli_query($connection, $ReadSql);

<tbody>

<?php

while($r = mysqli_fetch_assoc($res)){

<tr>

<td>

<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal<?php echo $r['id']; ?>">Delete</button>

<div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog">

<h4 class="modal-title">Delete File</h4>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

<a href="javascript:void(0);" onclick="ajax('delete', <?php echo $r['id']; ?>);"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a>

</div>

</td>

</tr>

<?php } ?>

</tbody>

edit.php

<?php
require_once('connect.php');
//if($_REQUEST['operation'] == 'edit'){
$id = $_REQUEST['id'];
$SelSql = "SELECT * FROM `crud` WHERE id=$id";
$res = mysqli_query($connection, $SelSql);
$r = mysqli_fetch_assoc($res);

if($_REQUEST['operation'] == 'update'){
	$id = $_REQUEST['id'];
	$fname = mysql_real_escape_string($_REQUEST['fname']);
	$lname = mysql_real_escape_string($_REQUEST['lname']);
	$email = mysql_real_escape_string($_REQUEST['email']);
	$gender = $_REQUEST['gender'];
	$age = $_REQUEST['age'];

	$UpdateSql = "UPDATE `crud` SET first_name='$fname', last_name='$lname', gender='$gender', age=$age, email_id='$email' WHERE id=$id";
	$res = mysqli_query($connection, $UpdateSql);
}

?>
<form method="post" class="form-horizontal col-md-6 col-md-offset-3">
<h2>UPDATE Operation in CRUD Application</h2>
	<div class="form-group">
	    <label for="input1" class="col-sm-2 control-label">First Name</label>
	    <div class="col-sm-10">
	      <input type="text" id="fname"  class="form-control" value="<?php echo $r['first_name']; ?>" placeholder="First Name" />
	    </div>
	</div>

	<div class="form-group">
	    <label for="input1" class="col-sm-2 control-label">Last Name</label>
	    <div class="col-sm-10">
	      <input type="text" id="lname"  class="form-control" value="<?php echo $r['last_name']; ?>" placeholder="Last Name" />
	    </div>
	</div>

	<div class="form-group">
	    <label for="input1" class="col-sm-2 control-label">E-Mail</label>
	    <div class="col-sm-10">
	      <input type="email" id="email"  class="form-control" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" />
	    </div>
	</div>

	<div class="form-group" class="radio">
	<label for="input1" class="col-sm-2 control-label">Gender</label>
	<div class="col-sm-10">
	  <label>
	    <input type="radio" id="gender" value="male" <?php if($r['gender'] == 'male'){ echo "checked";} ?>> Male
	  </label>
	  	  <label>
	    <input type="radio" id="gender" value="female" <?php if($r['gender'] == 'female'){ echo "checked";} ?>> Female
	  </label>
	</div>
	</div>

	<div class="form-group">
	<label for="input1" class="col-sm-2 control-label">Age</label>
	<div class="col-sm-10">
		<select id="age" class="form-control">
			<option>Select Your Age</option>
			<option value="20" <?php if($r['age'] == '20'){ echo "selected";} ?> >20</option>
			<option value="21" <?php if($r['age'] == '21'){ echo "selected";} ?> >21</option>
			<option value="22" <?php if($r['age'] == '22'){ echo "selected";} ?> >22</option>
			<option value="23" <?php if($r['age'] == '23'){ echo "selected";} ?> >23</option>
			<option value="24" <?php if($r['age'] == '24'){ echo "selected";} ?> >24</option>
			<option value="25" <?php if($r['age'] == '25'){ echo "selected";} ?> >25</option>
		</select>
	</div>
	</div>
	<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="Update" onclick="ajax_edit('update', <?php echo $r['id']; ?>); return false;"/>
</form>

<?php

require_once('connect.php');

//if($_REQUEST['operation'] == 'edit'){

$id = $_REQUEST['id'];

$SelSql = "SELECT * FROM `crud` WHERE id=$id";

$res = mysqli_query($connection, $SelSql);

$r = mysqli_fetch_assoc($res);

if($_REQUEST['operation'] == 'update'){

$id = $_REQUEST['id'];

$fname = mysql_real_escape_string($_REQUEST['fname']);

$lname = mysql_real_escape_string($_REQUEST['lname']);

$email = mysql_real_escape_string($_REQUEST['email']);

$gender = $_REQUEST['gender'];

$age = $_REQUEST['age'];

$UpdateSql = "UPDATE `crud` SET first_name='$fname', last_name='$lname', gender='$gender', age=$age, email_id='$email' WHERE id=$id";

$res = mysqli_query($connection, $UpdateSql);

}

<h2>UPDATE Operation in CRUD Application</h2>

<label for="input1" class="col-sm-2 control-label">First Name</label>

<input type="text" id="fname" class="form-control" value="<?php echo $r['first_name']; ?>" placeholder="First Name" />

</div>

<input type="text" id="lname" class="form-control" value="<?php echo $r['last_name']; ?>" placeholder="Last Name" />

</div>

<input type="email" id="email" class="form-control" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" />

</div>

<label for="input1" class="col-sm-2 control-label">Gender</label>

<label>

<input type="radio" id="gender" value="male" <?php if($r['gender'] == 'male'){ echo "checked";} ?>> Male

</label>

<label>

<input type="radio" id="gender" value="female" <?php if($r['gender'] == 'female'){ echo "checked";} ?>> Female

</label>

</div>

<option>Select Your Age</option>

</select>

</div>

<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="Update" onclick="ajax_edit('update', <?php echo $r['id']; ?>); return false;"/>

</form>

[/sociallocker] If you have any problem let me know using comment form below.

4 Steps to Create AJAX CRUD Application in PHP & MySQL

Other Articles in Learn AJAX

1. AJAX Read Operation in PHP & MySQL

2. AJAX Create Operation in PHP & MySQL

3. AJAX Delete Operation in PHP & MySQL

4. AJAX Edit Operation in PHP & MySQL

Complete Code of AJAX CRUD Application in PHP & MySQL

connect.php

index.html

ajax.php

edit.php

Related Posts

Vivek Vengala

4 Steps to Create AJAX CRUD Application in PHP & MySQL

Other Articles in Learn AJAX

1. AJAX Read Operation in PHP & MySQL

2. AJAX Create Operation in PHP & MySQL

3. AJAX Delete Operation in PHP & MySQL

4. AJAX Edit Operation in PHP & MySQL

Complete Code of AJAX CRUD Application in PHP & MySQL

connect.php

index.html

ajax.php

edit.php

Share this:

Related Posts

Vivek Vengala