In this tutorial,User can insert record and the record display on page without refresh a page and user can also delete the record and the the record delete also without refresh a page.This can be done by using JQuery and AJAX.
Here i also used Bootstrap for responsive table and form.
Bootstrap : Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.You can download latest Bootstrap from here
Config.php
<?php error_reporting(1); $host="localhost";//Server Name $username="root";//User Name $pass="";//Password $db="ajaxdemo";//Database Name $connect=mysql_connect($host,$username,$pass)or die(mysql_error());//Connect to MySql Server $dbselect=mysql_select_db($db,$connect)or die(mysql_error());//Select Database ?>
Javascript
$(document).ready(function(){
$(document).on('submit','#ajax_form',function(){
var formData = new FormData($(this)[0]);
var url = "ajax.php";
$.ajax({
type: "POST",
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data)
{
$("#ajax_table").append($(data));
$('#imagePreview').css({"background":"none"});
$('#imagePreview').css({"display":"none"});
$('#ajax_form')[0].reset();
}
});
return false;
});
});
$(document).ready(function(){
$(function() {
$('#ajax_table').on('click', 'td a.delete', function(){
var element = $(this);
var del_id = element.attr("data-id");
var info = 'id=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
type: "POST",
url: "ajax_delete.php",
data: info,
success: function(){
}
});
$(this).parents("tr").animate({ backgroundColor: "yellow" }, "slow")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
});
$(function() {
$("#image").on("change", function()
{
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
if (/^image/.test( files[0].type)){ // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function(){ // set image data as background of div
$("#imagePreview").css({"width":"50px","height":"50px","background-position":"center center","background-size":"cover","-webkit-box-shadow":"0 0 1px 1px rgba(0, 0, 0, .3)","display":"inline-block"});
$("#imagePreview").css("background-image", "url("+this.result+")");
}
}
});
});
HTML FORM
<!DOCTYPE html>
<html>
<head>
<title>Select Insert Delete PHP JQuery Ajax Mysql Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/javascript.js">
</script>
</head>
<body>
<center><h1><a href="http://wayto-php.blogspot.in/" target="new">Way To PHP</a></h1></center>
<div class="container">
<form class="form-horizontal" role="form" method="post" id="ajax_form" name="ajax_form" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-sm-4" for="name">First Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="first_name" placeholder="Enter First Name" name="first_name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="name">Last Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="name" placeholder="Enter Last Name" name="last_name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="occupation">Occupation:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="occupation" placeholder="Enter Occupation" name="occupation">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="country">Country:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="country" placeholder="Enter Country" name="country">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="image">Image:</label>
<div class="col-sm-4">
<div id="imagePreview"></div>
<input type="file" class="form-control" id="image" name="image">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-6">
<button type="submit" class="btn btn-default" name="add" id="add">Add New Record</button>
</div>
</div>
</form>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Ajax.php
<?php
include 'config.php';
$target_dir = "uploads/";
$file_name=$_FILES['image']['name'];
$full_name = explode('.',$file_name);
$file_name = time().'.'.$full_name[1]; //Replace Image name with Time
$target_file = $target_dir . basename($file_name);
$targetPath = "uploads/".$_FILES['image']['name'];
$upload=move_uploaded_file($_FILES["image"]["tmp_name"],$target_file);
extract($_POST);
$sql=mysql_query("INSERT INTO `users`(first_name,last_name,occupation,country,image)VALUES('".$first_name."','".$last_name."','".$occupation."','".$country."','".$file_name."')");
$id = mysql_insert_id();
if($sql)
{
echo '<tr>
<td>'.$first_name.'</td>
<td>'.$last_name.'</td>
<td>'.$occupation.'</td>
<td>'.$country.'</td>
<td><img src="'.$target_file.'" class="img-responsive" alt="Picture" width="50px" height="50px"></td>
<td><a data-id='.$id.' class="delete" href="#" name="delete" id="delete">Delete</a></td>
</tr>';
}
?>
Ajax_delete.php
<?php
include 'config.php';
if($_POST['id']!="")
{
extract($_POST);
$id=mysql_real_escape_string($id);
$sel=mysql_query("SELECT * FROM `users` WHERE id='".$id."'");
$row=mysql_fetch_array($sel);
unlink("uploads/".$row['image']);
$sql=mysql_query("DELETE FROM `users` WHERE id='".$id."'");
}
?>
