Insert,Update,Delete PHP Using Ajax
Hi Today Discussed Core PHP Insert,Update,Delete php using Ajax, Php insert view update delete without loading browser so data pasing ajax follows code.
Insert,Update,Delete PHP Using Ajax |
sql
CREATE TABLE IF NOT EXISTS `user_detail` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` text NOT NULL,
`age` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="modify.js"></script>
</head>
<body>
<div id="wrapper">
<?php
$host="localhost";
$username="root";
$password="";
$databasename="ajaxphp";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);
$select =mysql_query("SELECT * FROM user_detail");
?>
<table align="center" cellpadding="10" border="1" id="user_table">
<tr>
<th>NAME</th>
<th>AGE</th>
<th></th>
</tr>
<?php
while ($row=mysql_fetch_array($select))
{
?>
<tr id="row<?php echo $row['id'];?>">
<td id="name_val<?php echo $row['id'];?>"><?php echo $row['name'];?></td>
<td id="age_val<?php echo $row['id'];?>"><?php echo $row['age'];?></td>
<td>
<input type='button' class="edit_button" id="edit_button<?php echo $row['id'];?>" value="edit" onclick="edit_row('<?php echo $row['id'];?>');">
<input type='button' class="save_button" id="save_button<?php echo $row['id'];?>" value="save" onclick="save_row('<?php echo $row['id'];?>');">
<input type='button' class="delete_button" id="delete_button<?php echo $row['id'];?>" value="delete" onclick="delete_row('<?php echo $row['id'];?>');">
</td>
</tr>
<?php
}
?>
<tr id="new_row">
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_age"></td>
<td><input type="button" value="Insert Row" onclick="insert_row();"></td>
</tr>
</table>
</div>
</body>
</html>
modify.jsfunction edit_row(id)
{
var name=document.getElementById("name_val"+id).innerHTML;
var age=document.getElementById("age_val"+id).innerHTML;
document.getElementById("name_val"+id).innerHTML="<input type='text' id='name_text"+id+"' value='"+name+"'>";
document.getElementById("age_val"+id).innerHTML="<input type='text' id='age_text"+id+"' value='"+age+"'>";
document.getElementById("edit_button"+id).style.display="none";
document.getElementById("save_button"+id).style.display="block";
}
function save_row(id)
{
var name=document.getElementById("name_text"+id).value;
var age=document.getElementById("age_text"+id).value;
$.ajax
({
type:'post',
url:'modify_records.php',
data:{
edit_row:'edit_row',
row_id:id,
name_val:name,
age_val:age
},
success:function(response) {
if(response=="success")
{
document.getElementById("name_val"+id).innerHTML=name;
document.getElementById("age_val"+id).innerHTML=age;
document.getElementById("edit_button"+id).style.display="block";
document.getElementById("save_button"+id).style.display="none";
}
}
});
}
function delete_row(id)
{
$.ajax
({
type:'post',
url:'modify_records.php',
data:{
delete_row:'delete_row',
row_id:id,
},
success:function(response) {
if(response=="success")
{
var row=document.getElementById("row"+id);
row.parentNode.removeChild(row);
}
}
});
}
function insert_row()
{
var name=document.getElementById("new_name").value;
var age=document.getElementById("new_age").value;
$.ajax
({
type:'post',
url:'modify_records.php',
data:{
insert_row:'insert_row',
name_val:name,
age_val:age
},
success:function(response) {
if(response!="")
{
var id=response;
var table=document.getElementById("user_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+id+"'><td id='name_val"+id+"'>"+name+"</td><td id='age_val"+id+"'>"+age+"</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='delete_row("+id+");'/></td></tr>";
document.getElementById("new_name").value="";
document.getElementById("new_age").value="";
}
}
});
}
modify_record.php<?php
$host="localhost";
$username="root";
$password="";
$databasename="ajaxphp";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);
if(isset($_POST['edit_row']))
{
$row=$_POST['row_id'];
$name=$_POST['name_val'];
$age=$_POST['age_val'];
mysql_query("update user_detail set name='$name',age='$age' where id='$row'");
echo "success";
exit();
}
if(isset($_POST['delete_row']))
{
$row_no=$_POST['row_id'];
mysql_query("delete from user_detail where id='$row_no'");
echo "success";
exit();
}
if(isset($_POST['insert_row']))
{
$name=$_POST['name_val'];
$age=$_POST['age_val'];
mysql_query("insert into user_detail values('','$name','$age')");
echo mysql_insert_id();
exit();
}
?>