Select, Insert, Update and Delete using jQuery Ajax Animation in PHP

By Gurunatha Dogi in PHP
May 3rd, 2014
119433
15

Introduction

In this article we will demonstrate step by step without reloading page / refresh page how to do insert, update, delete and select using jQuery Ajax animation effects in PHP code.

This post is the extended version of my previous article post i.e. How to insert data using jQuery Ajax in PHP. In the previous article we have seen how to do insert using jquery ajax methods with php but we have not covered select, update and delete. So to cover every under one umbrella we have developed this step by step tutorial to show you how to do insert, update, delete and select using jQuery Ajax in addition with jQuery Animation Effects with PHP.

Step 1 : Create MYSQL Database Table

 
CREATE TABLE 'employee' (
'employee_id' INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
'emp_fname' VARCHAR( 500 ) NOT NULL ,
'emp_mname' VARCHAR( 500 ) NOT NULL ,
'emp_lname' VARCHAR( 500 ) NOT NULL ,
'emp_email' VARCHAR( 500 ) NOT NULL ,
'emp_contact' VARCHAR( 500 ) NOT NULL ,
'emp_designation' VARCHAR( 500 ) NOT NULL ,
'emp_gender' VARCHAR( 100 ) NOT NULL ,
'emp_country' VARCHAR( 100 ) NOT NULL ,
'emp_comments' LONGTEXT NOT NULL 
) ENGINE = MYISAM;

To demonstrate this tutorial we have created a basic database table called "employee" with columns as shown above. Just copy that above mysql code and run the mysql query. Above mysql query will create a "employee" table with different columns.

Step 2 : Create MYSQL Connection using PHP Script

We will create a new php file and name it as "sql_connection.php" and write the mysql connection code using php scripting language.

 
<?php
/**********Settings****************/
$host="localhost";
$dbname="data-base-name";
$user="root";
$pass="";
/**********Settings****************/


$conn=mysql_connect($host,$user,$pass);

if($conn)
{
$db_selected = mysql_select_db($dbname, $conn);
if (!$db_selected) {
    die ('Can\\'t use foo : ' . mysql_error());
}
}
else
{
    die('Not connected : ' . mysql_error());
}
?>

Create a new php file "sql_connection.php" and Copy&Paste the above code in the "sql_connection.php" file.

Step 3 : Create Simple Employer Input HTML Form

In this step create a new php file and name it as "index.php" and in the same file write a html code to create a employer input form to take the input data from the employee and save it in the database. This form should be in the "div" box with div id "#mforminsert". We have created this "div" with div id "#mforminsert" box because we will use this div box to load the form using the ajax methods while editing records.


<div id="mforminsert">

  <form id="forminsert" name="forminsert" method="post"  enctype="multipart/form-data" style="margin:0; padding:0; float:left;" onsubmit="return CommonFunction(this,'savedb_file.php', 'loaddata.php','forminsert');">	
  
  <input type="hidden" name="action" value="insert" />
  <input type="hidden" name="emp_id" value="0" />
  <p class="errormsg" style="display:none;">&nbsp;</p>
  <table border="1" cellpadding="2" cellspacing="1" style="border-collapse:collapse; font:12px Verdana, Arial, Helvetica, sans-serif;">
  
  <tr>
  <td align="left"> First Name : </td>
  <td> <input type="text" name="fname" value="" size="20" /></td>
  </tr>
  
  <tr>
  <td align="left"> Middle Name : </td>
  <td> <input type="text" name="mname" value="" size="20" /></td>
  </tr>
  
  <tr>
  <td align="left"> Last Name : </td>
  <td> <input type="text" name="lname" value="" size="20" /></td>
  </tr>
  
  <tr>
  <td align="left"> Email : </td>
  <td> <input type="text" name="email" value="" size="25"/></td>
  </tr>
  
  
  <tr>
  <td align="left"> Contact No : </td>
  <td> <input type="text" name="contact" value="" size="20"/></td>
  </tr>
  
  <tr>
  <td align="left"> Designation : </td>
  <td> <input type="text" name="designation" value="" size="20" /></td>
  </tr>
  
  <tr>
  <td align="left"> Gender : </td>
  <td> 
  <input type="radio" name="gender" value="Male" checked="checked" /> Male &nbsp;&nbsp;<input type="radio" name="gender" value="Female" /> Female
  </td>
  </tr>
  
  <tr>
  <td align="left"> Living Country : </td>
  <td> 
  <?php
  $country_array = array("India", "USA","UK");
  ?>
  <select name="country">
   <?php
    foreach($country_array as $val){
	
	
    ?>
     <option value="<?php echo $val; ?>"><?php echo $val; ?></option>
    <?php
    }
    ?>
  </select>
  </td>
  </tr>
  
  
  
  <tr>
  <td align="left"> Comments : </td>
  <td> <textarea name="comments" cols="20" rows="5"></textarea></td>
  </tr>
  
  <tr>
  <td align="left" colspan="2"> <input type="submit" name="Sub" value="Insert" /> &nbsp; <input type="reset"  value="Reset" /> </td>
  </tr>
  
  </table>
  </form>
 
</div>

Copy&Paste above code in the "index.php" file and save it. For best practice kindly copy&paste code in the body tag only.

If you see in the form tag onsubmit event we have called javascript function CommonFunction() with four input values. This is the main javascript function to insert/update data records.

Step 4 : Create Form Validation using Javascript

In this step for best practices we will do form validation before taking any values to database table from input form.

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


    if (theForm.fname.value == "") {
	alert("Please Enter Your First Name.");
	theForm.fname.focus();
	return (false);
    }
	
	if (theForm.mname.value == "") {
	alert("Please Enter Your Middle Name.");
	theForm.mname.focus();
	return (false);
    }
	
	if (theForm.lname.value == "") {
	alert("Please Enter Your Last Name.");
	theForm.lname.focus();
	return (false);
    }
	
	
    if (theForm.email.value == "") {
	alert("Please Enter Your Email Address.");
	theForm.email.focus();
	return (false);
    }
    
    if  (theForm.email.value != "") {   
    var eresult
    var str=theForm.email.value
    var filter=/^([\\w-]+(?:\\.[\\w-]+)*)@((?:[\\w-]+\\.)*\\w[\\w-]{0,66})\\.([a-z]{2,6}(?:\\.[a-z]{2})?)$/i
	if (!filter.test(str)) {
	    alert("Please enter a valid Email address!")
	    theForm.email.focus();
	    eresult=false;
	    return (eresult);
	}	
    }   
    
    if (theForm.contact.value == "") {
	alert("Please Enter Your Contact Number.");
	theForm.contact.focus();
	return (false);
    }
	
	if (theForm.designation.value == "") {
	alert("Please Enter Your Designation.");
	theForm.designation.focus();
	return (false);
    }
	
	
	if (theForm.comments.value == "") {
	alert("Please write your message/comments in message box.");
	theForm.comments.focus();
	return (false);
    }
    
   
  
  return true;
  
}

</script>

Copy&Paste the above form validation code to "head" tag section of "index.php" file and save it.

Step 5 : Javascript Function To Clear Form Fields

<script type="text/javascript">

function ClearFields(theForm){

	theForm.fname.value="";
	theForm.mname.value="";
	theForm.lname.value="";
	theForm.email.value="";
	theForm.contact.value="";
	theForm.designation.value="";
	theForm.comments.value="";
}
</script>

This above function we have created to reset/clear form fields after the data inserted/updated to database. Copy&Paste this above function "ClearFields()" to the index.php file and save it.

Step 6 : Implementing jQuery Library From Google/Microsoft/jQuery CDN

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Insert this above snippet of code in the head section of index.php file. This file is either be downloaded and saved to the local server or you can this file directly from the jQuery CDN source (Google or jQuery or Microsoft).

Step 7 : Implementation of jQuery Ajax method

In this step we will implement our main function called "CommonFunction(FormObject, pageurl, loadurl, FormID)" with four input values i.e.

FormObject = Current Form Object

pageurl = PHP Page where http post values posted for insert/update)

loadurl = This PHP page load's the data from database. It only load's that data which was last inserted/updated.

FormID = The form attribute id name i.e. Here form id is "forminsert".

<script type="text/javascript">

function CommonFunction(FormObject, pageurl, loadurl,  FormID) { 
   	
    if(InputFieldValidations(FormObject)) {	
		    
	$.ajax({
	    url: pageurl,
	    async: true,
	    cache: false,
	    data: $('#'+FormID).serialize(),
	    type: 'post',			
	    success: function (data) {
		   data=data.replace(/\\s+/g,"");
		   
		   
		   if(data != 0){
		 
				var spancontainer;
			    $('.errormsg').empty();
			    $('div#successfulpost').fadeIn();
			    
			    if($('span#record'+data).length){
				spancontainer=$('span#record'+data);
			    }else{
			    $("<span id='record"+data+"' class='items'></span>").appendTo("#mloaddata");
				spancontainer=$('span#record'+data);
			    }
			    ///If an element found
			    if(spancontainer.length){
					
					spancontainer.slideDown('slow', function(){
					spancontainer.html('<div style="float:left; margin-left:5px;"><img src="loading.gif" /></div>');
					spancontainer.fadeIn("slow");
			   		spancontainer.load(loadurl+'?empid='+data+'&sid='+Math.random());
					});
			    }
			
		    }
		    else {
		        
			    $('#'+FormID).show(function(){					
			    $('.errormsg').html(data);
			    $('.errormsg').fadeIn(500);
			    });
		    }
	    },
	    error : function(XMLHttpRequest, textStatus, errorThrown) {
		    alert(textStatus);
	    }
	});
	
	ClearFields(FormObject);
	return false;
    }
    return false;    
}

</script>

Above code is the complete code of "CommonFunction(FormObject, pageurl, loadurl, FormID)" function just copy&paste this above function in the "index.php" file.

If you see the above function code in the first line code only we have called our form validation function "InputFieldValidations()" and passed our form object to the function to check if all input validations is true then only function moves to next line of code.

After the successful input validation function in the next line of code we have called jQuery.ajax method for asynchronous (Asynchronous JavaScript and XML) data post or data load from the server without reloading or refreshing the page with animation effects and better user experience.

To Insert Record :

Here in this example "CommonFunction(FormObject, pageurl, loadurl, FormID)" takes four input values as follows :

FormObject = "this"

pageurl = "savedb_file.php"

loadurl = "loaddata.php"

FormID = "forminsert"

So in this demonstration to insert a data we have passed above values to "CommonFunction()" function. So ajax method takes pageurl and post the data to server file "savedb_file.php" file to insert the data.

Source code of savedb_file.php file

<?php
include("sql_connection.php");

if(!empty($_POST["fname"])){
$fname = $_POST["fname"];
}

if(!empty($_POST["mname"])){
$mname = $_POST["mname"];
}

if(!empty($_POST["lname"])){
$lname = $_POST["lname"];
}

if(!empty($_POST["email"])){
$email = $_POST["email"];
}

if(!empty($_POST["contact"])){
$contact = $_POST["contact"];
}

if(!empty($_POST["designation"])){
$designation = $_POST["designation"];
}

if(!empty($_POST["gender"])){
$gender = $_POST["gender"];
}

if(!empty($_POST["country"])){
$country = $_POST["country"];
}

if(!empty($_POST["comments"])){
$comments = $_POST["comments"];
}

if(!empty($_POST["action"])){
$action = $_POST["action"];
}


$emp_id = 0;

if(!empty($_POST["emp_id"])){
$emp_id = $_POST["emp_id"];
}

if($action == "insert" && $emp_id == 0){

	$query_customers = "INSERT INTO `employee` (`emp_fname`,`emp_mname`,`emp_lname`,`emp_email`,`emp_contact`,`emp_designation`
    ,`emp_gender`,`emp_country`,`emp_comments`) 
    VALUES ('" .$fname. "','" .$mname. "','" .$lname. "','" .$email. "','" .$contact. "'
    ,'" .$designation. "','" .$gender. "','" .$country. "','" .$comments. "')";
	
	$sql_customers = mysql_query($query_customers) or die(mysql_error());
	
	$InsertID = mysql_insert_id();
	
	if(mysql_affected_rows() > 0){
	echo $InsertID;
	}else{
	echo 0;
	}

}///Insert


?>

Create a new file called savedb_file.php and copy&paste the above code and save it.

Once the data inserted to the mysql database it will return last inserted data value (employee_id it returns back to jQuery.ajax success callback function). If the data inserted successfully jQuery creates a new element i.e. <span> tag with span id as record followed by last data inserted ID (This value returns from mysql database i.e. employee_id) by using jQuery.appendTo() method.

After creating a new span element then using jQuery.load() function we pass the loadurl ("loaddata.php") to the jQuery.load() with employee ID to retrive the last added data from the mysql table and loads that retrived data to newly added span element.

Source code of loaddata.php file

<?php
include("sql_connection.php");

if(!empty($_GET["empid"])){
$empid = $_GET["empid"];
}

	
	
	$Q_select = "Select * from `employee` Where `employee_id`='".$empid."' Order by `employee_id` DESC";

	$sql_Q = mysql_query($Q_select) or die(mysql_error());	
	$totalrow = mysql_num_rows($sql_Q);
	
	if($totalrow > 0){ 
	
	$row_Q = mysql_fetch_array($sql_Q,MYSQL_BOTH);
?>

   
        
         <table border="1" cellpadding="3" cellspacing="3" style="border-collapse:collapse; font:12px Verdana, Arial, Helvetica, sans-serif;" width="750" >
         
         <tr>
         <td colspan="6">
         <b>Employee Details</b>
         </td>
         </tr>
         <tr>
	 <td>Emp ID</td>
         <td>Name</td>
         <td>Email</td>
         <td>Contact</td>
         <td>Designation</td>
         <td>Gender</td>
         <td>Options</td>
         </tr>
         
        
         <tr>
	 <td><?php echo $row_Q["employee_id"]; ?></td>
         <td><?php echo $row_Q["emp_fname"]." ".$row_Q["emp_mname"]." ".$row_Q["emp_lname"]; ?></td>
         <td><?php echo $row_Q["emp_email"]; ?></td>
         <td><?php echo $row_Q["emp_contact"]; ?></td>
         <td><?php echo $row_Q["emp_designation"]; ?></td>
         <td><?php echo $row_Q["emp_gender"]; ?></td>
         
         <td>
        <a style="cursor: pointer;" onclick="ActionFunction('edit.php',<?php echo $row_Q["employee_id"]; ?>,'edit');"><img src="edit_01.gif" border="0" alt="Edit" /></a> &nbsp;
 <a style="cursor: pointer;" onclick="ActionFunction('delete.php',<?php echo $row_Q["employee_id"]; ?>,'delete');"><img src="delete_01.gif" border="0" alt="Delete" /></a>
                    
          </td>
         </tr>
         </table>
        
       

<?php

	}

?>

Create a new php file "loaddata.php" and copy&paste the above source code.

Complete list of records will be displayed on "index.php" screen with optional "edit" and "delete" link.

Step 8 : Edit/Delete using jQuery Ajax method

If you see our above "loaddata.php" file we have displayed the records "Employee Name, Employee ID, Employee Designation.." with edit and delete link.

On edit anchor link and delete anchor link onClick() event we have called new javascript function called ActionFunction(urls, empids, work) with three input values i.e.

urls : pageurl (which page you want to call [edit/delete])

empids : employee ID (This value need to be set from the mysql data)

work : Action (You want to do Edit or Delere).

complete source code as shown below.

<script type="text/javascript">
function ActionFunction(urls, empids, work){
    
    if (work == "edit") {
      
	  
	  var divcontainer=$('#mforminsert');
	 
	  divcontainer.empty();
          divcontainer.html('<div style="float:left; margin-left:5px; width:400px; height:250px;"><img src="loading.gif" /></div>');
	 
	  divcontainer.slideDown('slow', function(){
          divcontainer.load(urls+'?empid='+empids+'&sid='+Math.random());
      });
	 
	 
    }
    
    if (work == "delete") {
     
     var result = confirm("Are you sure you want to delete?");
      if (result == true) {
	
	$.ajax({
	    url: urls,
	    async: true,
	    cache: false,
	    data: {empid: empids},
	    type: 'get',			
	    success: function (data) {
		   data=data.replace(/\\s+/g,"");
		   var spancontainer=$('span#record'+empids);
		   if(data != 0){

			 spancontainer.slideUp('slow', function(){
                         spancontainer.fadeOut("slow");
	                 spancontainer.remove();
			 });
			    
			
		    }
		    else {
		        spancontainer.slideUp('slow', function(){		
			    spancontainer.html("Error While this deleting a record");
				});
		    }
	    },
	    error : function(XMLHttpRequest, textStatus, errorThrown) {
		    alert(textStatus);
	    }
	});
	
     
      }
     
    }
    
}
</script>

Just copy&paste the above javascript source code to "index.php" file.

To Edit Record :

To edit any record we have used edit anchor link and in onClick event of edit link we have used a function called "ActionFunction()" and passed the three i.e.

pageurl : "edit.php" (Page which contains the form for editing)

empids : employee ID (This is retrived from database table and to edit employee record)

Work : Action you want to perform because the same function is used for delete record. So if you want to edit a record just pass "edit" or to delete just pass "delete".

Now to edit any record create a new php file called "edit.php" and copy&paste the below code.
Source code of "edit.php" file

 
><?php
include("sql_connection.php");

if(!empty($_GET["empid"])){
$empid = $_GET["empid"];
}

$Q_select = "Select * from `employee` Where `employee_id`='".$empid."' Order by `employee_id` DESC";
$sql_Q = mysql_query($Q_select) or die(mysql_error());	
$totalrow = mysql_num_rows($sql_Q);
$row_Q = mysql_fetch_array($sql_Q,MYSQL_BOTH);
?>

  <form id="formupdate" name="formupdate" method="post"  enctype="multipart/form-data" style="margin:0; padding:0; float:left;" onsubmit="return CommonFunction(this,'updatedb_file.php', 'loaddata.php','formupdate');">	
  
  <input type="hidden" name="action" value="update" />
  <input type="hidden" name="emp_id" value="<?php echo $empid; ?>" />
  <p class="errormsg" style="display:none;">&nbsp;</p>
  <table border="1" cellpadding="2" cellspacing="1" style="border-collapse:collapse; font:12px Verdana, Arial, Helvetica, sans-serif;">
  
  <tr>
  <td align="left"> First Name : </td>
  <td> <input type="text" name="fname" value="<?php echo $row_Q["emp_fname"]; ?>" size="20" /></td>
  </tr>
  
  <tr>
  <td align="left"> Middle Name : </td>
  <td> <input type="text" name="mname" value="<?php echo $row_Q["emp_mname"]; ?>" size="20" /></td>
  </tr>
  
  <tr>
  <td align="left"> Last Name : </td>
  <td> <input type="text" name="lname" value="<?php echo $row_Q["emp_lname"]; ?>" size="20" /></td>
  </tr>
  
  <tr>
  <td align="left"> Email : </td>
  <td> <input type="text" name="email" value="<?php echo $row_Q["emp_email"]; ?>" size="25"/></td>
  </tr>
  
  
  <tr>
  <td align="left"> Contact No : </td>
  <td> <input type="text" name="contact" value="<?php echo $row_Q["emp_contact"]; ?>" size="20"/></td>
  </tr>
  
  <tr>
  <td align="left"> Designation : </td>
  <td> <input type="text" name="designation" value="<?php echo $row_Q["emp_designation"]; ?>" size="20" /></td>
  </tr>
  
  <tr>
  <td align="left"> Gender : </td>
  <td>
   <?php
   $radio1 = "";
   $radio2 = "";
   if($row_Q["emp_gender"] == "Male"){
    $radio1 = "checked";
   }elseif($row_Q["emp_gender"] == "Female"){
    $radio2 = "checked";
   }
   ?>
  <input type="radio" name="gender" value="Male" <?php echo $radio1; ?>/> Male &nbsp;&nbsp;<input type="radio" name="gender" value="Female" <?php echo $radio2; ?>/> Female
  </td>
  </tr>
  
  <tr>
  <td align="left"> Living Country : </td>
  <td>
  <?php
  $country_array = array("India", "USA","UK");
  ?>
  <select name="country">
   <?php
    foreach($country_array as $val){
	
	$sel = "";
	if($val == $row_Q["emp_country"]){
	    $sel = "selected";
	}
    ?>
     <option value="<?php echo $val; ?>" <?php echo $sel; ?>><?php echo $val; ?></option>
    <?php
    }
    ?>
  </select>
  </td>
  </tr>
  
  
  
  <tr>
  <td align="left"> Comments : </td>
  <td> <textarea name="comments" cols="20" rows="5"><?php echo $row_Q["emp_comments"]; ?></textarea></td>
  </tr>
  
  <tr>
  <td align="left" colspan="2"> <input type="submit" name="Sub" value="Update" /> &nbsp; <input type="reset"  value="Reset" /> </td>
  </tr>
  
  </table>
  </form>

Which ever record you choosed to edit that data only will be displayed in "edit.php" file and that file gets loaded in the div tag with div id "mforminsert" in the "index.php" file. Do the necessary changes and finally click on update button to update the record.

To Update a Record

If you see in the form tag onSubmit() event we have called the same function which we were called during inserting a record i.e. CommonFunction() function with four input values.

In this program we passed four values to our CommonFunction() such as

FormObject : this

pageurl : "updatedb_file.php"

loadurl : "loaddata.php"

FormID : "formupdate"

The process of this function is same as we did it while adding new record. Same way first form will be validated and post all data to "updatedb_file.php" using $.ajax method. Once the mysql data is updated successfully then only that span element is get refreshed or loaded with updated data.

Create a new file and name it "updatedb_file.php" and copy&paste the following code as shown below.

<?php
include("sql_connection.php");

if(!empty($_POST["fname"])){
$fname = $_POST["fname"];
}

if(!empty($_POST["mname"])){
$mname = $_POST["mname"];
}

if(!empty($_POST["lname"])){
$lname = $_POST["lname"];
}

if(!empty($_POST["email"])){
$email = $_POST["email"];
}

if(!empty($_POST["contact"])){
$contact = $_POST["contact"];
}

if(!empty($_POST["designation"])){
$designation = $_POST["designation"];
}

if(!empty($_POST["gender"])){
$gender = $_POST["gender"];
}

if(!empty($_POST["country"])){
$country = $_POST["country"];
}

if(!empty($_POST["comments"])){
$comments = $_POST["comments"];
}

if(!empty($_POST["action"])){
$action = $_POST["action"];
}

$emp_id = 0;

if(!empty($_POST["emp_id"])){
$emp_id = $_POST["emp_id"];
}

if($action == "update" && $emp_id > 0){

	$query_customers = "Update `employee` set `emp_fname` = '" .$fname. "',`emp_mname` = '" .$mname. "',`emp_lname` = '" .$lname. "',`emp_email` = '" .$email. "',`emp_contact` = '" .$contact. "',`emp_designation` = '" .$designation. "',`emp_gender` = '" .$gender. "',`emp_country` = '" .$country. "',`emp_comments`='" .$comments. "'Where `employee_id`='".$emp_id."' ";
	
	$sql_customers = mysql_query($query_customers) or die(mysql_error());
	
	
	
	if(mysql_affected_rows() > 0){
	echo $emp_id;
	}else{
	echo 0;
	}

}///Update

?>

To Delete Record

To delete any record we have used delete anchor link and in onClick event of delete link we have used a function called "ActionFunction()" and passed the three i.e.

pageurl : "delete.php" (Page where delete query is written)

empids : employee ID (Will be used to delete employee record)

Work : Action value to delete

Below is the javascript function which is used to delete a single record from the mysql database. Once the data is deleted from database the associated span id element is also get removed from "index.php" file.

Note : Below function will only work for delete action. The complete function is already given in the above file.

<script type="text/javascript">
function ActionFunction(urls, empids, work){
    
    if (work == "delete") {
	 
     var result = confirm("Are you sure you want to delete?");

      if (result == true) {
	
	$.ajax({
	    url: urls,
	    async: true,
	    cache: false,
	    data: {empid: empids},
	    type: 'get',			
	    success: function (data) {
		   data=data.replace(/\\s+/g,"");
		   var spancontainer=$('span#record'+empids);
		   if(data != 0){

			 spancontainer.slideUp('slow', function(){
                         spancontainer.fadeOut("slow");
	                 spancontainer.remove();
			 });
			    
			
		    }
		    else {
		        spancontainer.slideUp('slow', function(){		
			    spancontainer.html("Error While this deleting a record");
				});
		    }
	    },
	    error : function(XMLHttpRequest, textStatus, errorThrown) {
		    alert(textStatus);
	    }
	});
	
     
      }
     
    }
    
}
</script>

Create a new file "delete.php" and copy&paste the below code.

<?php
include("sql_connection.php");

if(!empty($_GET["empid"])){
$empid = $_GET["empid"];
}

	
	
	$Q_select = "DELETE from `employee` Where `employee_id`='".$empid."'";
	$sql_Q = mysql_query($Q_select) or die(mysql_error());	
	
	
	if(mysql_affected_rows() > 0){
	echo $empid;
	}else{
	echo 0;
	}
	
	
?>

So hey friends this is all about select, insert, update and delete using jQuery $.ajax animation effects with php scripting code. Please Note while loading data, inserting data to mysql, updating data to mysql or deleting data everything is done by using jQuery animation effects that is using jQuery.fadeIn(), jQuery.slideUp(), jQuery.slideDown(), jQuery.fadeOut() methods.

If you have any question/doubt please feel free to ask me through your comments and if you like this article kindly share it with your friends on google+, facebook, twitter.

Click below link to download complete source code of this tutorial

Download Now

If like this post then share it in your social media networks.

Gurunatha Dogi

Gurunatha Dogi is a software engineer by profession and founder of Onlinebuff.com, Onlinebuff is a tech blog which covers topics on .NET Fundamentals, Csharp, Asp.Net, PHP, MYSQL, SQL Server and lots more..... read more

Comments

By Anonymous on 2015-10-29

This post help me a lot. Thank you.

By Abhishek on 2015-06-09

HI, How can I load the "forminsert" after editing a record

By Sebi on 2015-05-22

Same issue: after updating a record how can I change back to insert mode? Thx for your answer.

By Sebi on 2014-11-27

Hi. Same issue as posted before by Vinod. After updating a record how can I change back to inserting mode? Really appreciate your help. Thx a lot.

By Vinod on 2014-09-04

HI, How can I load the "forminsert" after editing a record

By Vinod on 2014-09-03

HI, I am having one doubt. After editing one record, the form shown in the page is "formupdate" from edit.php . How can I change it to "forminsert" from index.php

By Saphea on 2014-08-20

thank you so much......

By Fizah on 2014-08-15

'empids' for this coding refer to what? im confuse..because i want to edit this coding to my system.can you help me?=(

By Sathish kumar on 2014-07-23

hi...my main page like table that contain name,address etc..and edit delete,add link also now i'm click edit ,page will diplay same page with my tables,delete dialouge box also i want pls needful for me...

By Sonu kumar on 2014-07-15

good ...keep it up bro...u are the IT guys...who help others..thanks bye..

By Salem on 2014-07-12

hi, thank you for your effort, i need your help in inserting arabic characters in the above form

By Vishal tandel on 2014-07-10

How to add extra field to upload files as well?

By Admin on 2014-07-02

@Badru, Just load the records again...using jQuery.load function or jQuery.ajax

By Badru on 2014-07-02

After insert the records are not automatically displayed, how to do that?

By Naveen on 2014-05-15

hiiiiii

Add a Comment

By Gurunatha Dogi
Apr 18th, 2014
39462
15

Step by step to upload a file to ftp server using php code

By Gurunatha Dogi
Apr 6th, 2014
408297
15

Step by step to upload an image and store in database using php

By Gurunatha Dogi
May 1st, 2013
19234
15

How to get Date and Time using PHP

By Gurunatha Dogi
Apr 28th, 2013
15020
15