AJAX Add Edit Delete Records in Database using PHP and jQuery

In this jQuery AJAX tutorial we will learn about how to add, edit and delete records in MySQL database using PHP. We have used a jQuery handler which generates and sends AJAX call to the backend database along with the action requested. This handler responds the updated status back. If you are looking for a non-AJAX plain PHP CRUD, go though my previous tutorial.

Live DemoDownload

AJAX Form to Perform Database Add Edit Delete

We have form controls to enter user data and trigger AJAX event to perform database action. This code initially displays list of records from database table. It also has an add form to enter new record via AJAX.

<div id="comment-list-box"> <?php if(!empty($comments)) { foreach($comments as $k=>$v) { ?>

// display comments list <div class="message-box" id="message_<?php echo $comments[$k]["id"];?>"> <div> <button class="btnEditAction" name="edit" onClick="showEditBox(<?php echo $comments[$k]["id"]; ?>)">Edit</button> <button class="btnDeleteAction" name="delete" onClick="callCrudAction('delete',<?php echo $comments[$k]["id"]; ?>)">Delete</button> </div> <div class="message-content"><?php echo $comments[$k]["message"]; ?></div> </div> <?php }} ?> </div> <div id="frmAdd"><textarea name="txtmessage" id="txtmessage" cols="80" rows="10"></textarea> <p><button id="btnAddAction" name="submit" onClick="callCrudAction('add','')">Add Comment</button></p> </div>

Once the add form is submitted then the form data is sent to the PHP page via an AJAX call. On successful add event, it reloads the list of records displayed above add form.

jQuery AJAX Function to Query for Database CRUD

In our jQuery AJAX function, we have switch cases add edit and delete. These cases generates  various query-string and response-data depending on the database action.

function callCrudAction(action,id) {
$("#loaderIcon").show();
var queryString;
switch(action) {
case "add":
queryString = 'action='+action+'&txtmessage='+ $("#txtmessage").val();
break;
case "edit":
queryString = 'action='+action+'&message_id='+ id + '&txtmessage='+ $("#txtmessage_"+id).val();
break;
case "delete":
queryString = 'action='+action+'&message_id='+ id;
break;}	 
jQuery.ajax({
url: "crud_action.php",
data:queryString,
type: "POST",
success:function(data){
switch(action) {
case "add":
$("#comment-list-box").append(data);
break;
case "edit":
$("#message_" + id + " .message-content").html(data);
$('#frmAdd').show();
break;
case "delete":
$('#message_'+id).fadeOut();
break;
}
$("#txtmessage").val('');
$("#loaderIcon").hide();
},
});}

ajax-crud

PHP Script for Database CRUD operations

Following code block is a plain database query operations. This PHP script after performing CRUD actions it returns the updated database records as the response of the AJAX call.

require_once("dbcontroller.php");
$db_handle = new DBController();
$action = $_POST["action"];
if(!empty($action)) {
switch($action) {
case "add":
$result = mysql_query("INSERT INTO comment(message) VALUES('".$_POST["txtmessage"]."')");
if($result){
$insert_id = mysql_insert_id();
echo '<div class="message-box"  id="message_' . $insert_id . '">
<div>
<button class="btnEditAction" name="edit" onClick="showEditBox(' . $insert_id . ')">Edit</button>
<button class="btnDeleteAction" name="delete" onClick="callCrudAction(\'delete\',' . $insert_id . ')">Delete</button>
</div>
<div class="message-content">' . $_POST["txtmessage"] . '</div></div>';
}
break;
case "edit":
$result = mysql_query("UPDATE comment set message = '".$_POST["txtmessage"]."' WHERE  id=".$_POST["message_id"]);
if($result) echo $_POST["txtmessage"];
break;	
case "delete": 
if(!empty($_POST["message_id"])) {
mysql_query("DELETE FROM comment WHERE id=".$_POST["message_id"]);
}
break;}}

Live DemoDownload

This jQuery code tutorial was published on October 10, 2014.

↑ Back to Top