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."'");
}
?>
ReplyDeleteVery Informative post you have done. I like the way you describe the topic.
Thanks
Digital Marketing Training Institute in Delhi
Business Analytics Training in delhi
Business Analytics Course in delhi
Si Contact Form Plugin using for captcha to setup contact form in get it proper way it make properly
ReplyDeleteWoocommerce Floating Cart setup in woocommerce side cart in your ecommerce website
ReplyDeletefast secure contact form for setup contact form with captcha and secure in your wordpress site
ReplyDeleteFrequently Bought Together For Woocommerce making to you can bought combo product in woocommerce with good discount in your website
ReplyDeleteFast Secure Contact Form is replace with old si contact form plugin to using with wordpress as contact form plguin
ReplyDelete