Home » Add Edit And Delete Records Using jQuery Ajax PHP And MySQL

Add Edit And Delete Records Using jQuery Ajax PHP And MySQL

Add Edit And Delete Records Using jQuery Ajax PHP And MySQL

In this Post We Will Explain About is Add Edit And Delete Records Using jQuery Ajax PHP And MySQL With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to live table add edit delete using ajax jquery in php mysqlExample

In this post we will show you Best way to implement add edit delete rows dynamically using jquery and php, hear for insert update delete in php with examplewith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Read Also:  PHP Image Resize, Crop, Thumbnail, Watermark

Step 1.create a PHP file to display your database records

// simple Database Structure 
CREATE TABLE `stock_move` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `item_name` text NOT NULL,
 `memo` int(11) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

index.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="do_change_records.js"></script>
</head>
<body>
<div id="wrapper">

<?php
$server_host="localhost";
$server_username="root";
$your_pass="";
$databasename="live24u";
$connect=mysql_connect($server_host,$server_username,$your_pass);
$db=mysql_select_db($databasename);

$select =mysql_query("SELECT * FROM stock_move");
?>

<table align="center" cellpadding="10" border="1" id="user_table">
<tr>
<th>NAME</th>
<th>AGE</th>
<th></th>
</tr>
<?php
while ($custom_row=mysql_fetch_array($select)) 
{
 ?>
 <tr id="custom_row<?php echo $custom_row['id'];?>">
  <td id="item_value<?php echo $custom_row['id'];?>"><?php echo $custom_row['item_name'];?></td>
  <td id="memo_value<?php echo $custom_row['id'];?>"><?php echo $custom_row['memo'];?></td>
  <td>
   <input type='button' class="edit_button" id="edit_button<?php echo $custom_row['id'];?>" value="edit" onclick="edit_row('<?php echo $custom_row['id'];?>');">
   <input type='button' class="save_button" id="save_button<?php echo $custom_row['id'];?>" value="save" onclick="save_row('<?php echo $custom_row['id'];?>');">
   <input type='button' class="delete_button" id="delete_button<?php echo $custom_row['id'];?>" value="delete" onclick="remove_row('<?php echo $custom_row['id'];?>');">
  </td>
 </tr>
 <?php
}
?>

<tr id="new_row">
 <td><input type="text" id="new_item"></td>
 <td><input type="text" id="new_memo"></td>
 <td><input type="button" value="Add Row" onclick="add_row();"></td>
</tr>
</table>

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

Step 2.Make a js simple file and here define scripting

function edit_row(id)
{
 var item_name=document.getElementById("item_value"+id).innerHTML;
 var memo=document.getElementById("memo_value"+id).innerHTML;

 document.getElementById("item_value"+id).innerHTML="<input type='text' id='item_text"+id+"' value='"+item_name+"'>";
 document.getElementById("memo_value"+id).innerHTML="<input type='text' id='memo_text"+id+"' value='"+memo+"'>";
	
 document.getElementById("edit_button"+id).style.display="none";
 document.getElementById("save_button"+id).style.display="block";
}

function save_row(id)
{
 var item_name=document.getElementById("item_text"+id).value;
 var memo=document.getElementById("memo_text"+id).value;
	
 $.ajax
 ({
  type:'post',
  url:'do_change_records.php',
  data:{
   edit_row:'edit_row',
   prow_id:id,
   item_value:item_name,
   memo_value:memo
  },
  success:function(results) {
   if(results=="success")
   {
    document.getElementById("item_value"+id).innerHTML=item_name;
    document.getElementById("memo_value"+id).innerHTML=memo;
    document.getElementById("edit_button"+id).style.display="block";
    document.getElementById("save_button"+id).style.display="none";
   }
  }
 });
}

function remove_row(id)
{
 $.ajax
 ({
  type:'post',
  url:'do_change_records.php',
  data:{
   remove_row:'remove_row',
   prow_id:id,
  },
  success:function(results) {
   if(results=="success")
   {
    var custom_row=document.getElementById("custom_row"+id);
    custom_row.parentNode.removeChild(custom_row);
   }
  }
 });
}

function add_row()
{
 var item_name=document.getElementById("new_item").value;
 var memo=document.getElementById("new_memo").value;

 $.ajax
 ({
  type:'post',
  url:'do_change_records.php',
  data:{
   add_row:'add_row',
   item_value:item_name,
   memo_value:memo
  },
  success:function(results) {
   if(results!="")
   {
    var id=results;
    var table=document.getElementById("user_table");
    var table_len=(table.rows.length)-1;
    var custom_row = table.insertRow(table_len).outerHTML="<tr id='custom_row"+id+"'><td id='item_value"+id+"'>"+item_name+"</td><td id='memo_value"+id+"'>"+memo+"</td><td><input type='button' class='edit_button' id='edit_button"+id+"' value='edit' onclick='edit_row("+id+");'/><input type='button' class='save_button' id='save_button"+id+"' value='save' onclick='save_row("+id+");'/><input type='button' class='delete_button' id='delete_button"+id+"' value='delete' onclick='remove_row("+id+");'/></td></tr>";

    document.getElementById("new_item").value="";
    document.getElementById("new_memo").value="";
   }
  }
 });
}

Step 3.create a PHP file for and simple mysql database operations

<?php
$server_host="localhost";
$server_username="root";
$your_pass="";
$databasename="live24u";

$connect=mysql_connect($server_host,$server_username,$your_pass);
$db=mysql_select_db($databasename);

if(isset($_POST['edit_row']))
{
 $custom_row=$_POST['prow_id'];
 $item_name=$_POST['item_value'];
 $memo=$_POST['memo_value'];

 mysql_query("update stock_move set item_name='$item_name',memo='$memo' where id='$custom_row'");
 echo "success";
 exit();
}

if(isset($_POST['remove_row']))
{
 $row_no=$_POST['prow_id'];
 mysql_query("delete from stock_move where id='$row_no'");
 echo "success";
 exit();
}

if(isset($_POST['add_row']))
{
 $item_name=$_POST['item_value'];
 $memo=$_POST['memo_value'];
 mysql_query("insert into stock_move values('','$item_name','$memo')");
 echo mysql_insert_id();
 exit();
}
?>

Example

Read Also:  NodeJS RESTful API User Authentication with AngularJS using PHP MYSQL

I hope you have Got What is add edit and delete record using php/mysql And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jQuery Get Dropdownlist Selected Value Onchange Event
  2. Read Also:  jQuery Deleting Record from MySQL Table Row in Ajax
  3. Read Also:  Web Services Tutorial In PHP For Beginners
  4. Read Also:  Laravel 5.6 Sending Emails using SMTP Tutorial
  5. Read Also:  calling javascript function from php code
  6. Read Also:  Delete Table Rows Using PHP JQuery Ajax
  7. Read Also:  jquery ajax call php function with parameters
  8. Read Also:  laravel multi auth (Authentication) guards Example
  9. Read Also:  PHP File file_get_contents Handling Function
  10. Read Also:  How to Generate JavaScript Random Numbers?

Leave a Comment

Your email address will not be published. Required fields are marked *