Insert Update Delete Using Ajax Jquery, Tips And Tricks

Insert Update Delete Using Ajax Jquery

If in a previous article I wrote about the other functions of the iframe, which I review, I use iframe as a trigger to insert, update, delete. Read: Another Function Of IFrame.

So, this time I wrote an article related to insert, update, delete methods on the webbase programming. I can say this is the correct method to insert, update, delete using jquery ajax in php programming.

With simple script and easy to understand as source to learning and increase insight for beginners who are learning php ajax jquery programming languages. Or you can download the module at: Ajax Jquery Insert Update Delete. The first thing you should do is create a database and a table with fields: id (auto increment), name (varchar).

IMAGE RESULT:

Copy the following script into the file index.php:

<html>
<head>
<title>bagustuta.com</title>
</head>
<body>
<div>
Ajax javascript insert, update, delete Method.
</div>
<div>
 
</div>
<div>
Input Form
</div>
<div>
Name : <input type="text" id="name" placeholder="Type Your Name">   <input type="button" id="btnsave" onClick="save(document.getElementById('name').value,document.getElementById('ids').value)" value="Save"/>
<input type="hidden" id="ids" value="">
</div>
<div>
 
</div>
<div>
Data Table
</div>
<div id="showdata"></div>
</body>
</html>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<script type="text/javascript">

//load data
$('#showdata').load("data.php");

//save & edit function
function save(val,id){
if(id==""){
$.post("data.php?method=save&val="+val);
}else{
$.post("data.php?method=edit&val="+val+"&id="+id);
}
document.getElementById('ids').value="";
document.getElementById('name').value="";
$('#showdata').load("");
$('#showdata').load("data.php").fadeIn("slow");
}

//delete function
function del(val){
$.post("data.php?method=delete&val="+val);
$('#showdata').load("");
$('#showdata').load("data.php").fadeIn("slow");
}
</script>

Copy the following script into the file data.php:

<?php
//database connection
$host = "localhost"; //your mysql host address
$database_name = "dbtest"; //your mysql database name
$user_name = "root"; //your mysql user name
$password = "root"; //your mysql password
$conn=mysql_connect($host,$user_name,$password);
mysql_select_db($database_name,$conn);
//end database connection-->

$val=$_REQUEST["val"];
$method=$_REQUEST["method"];
$id=$_REQUEST["id"];

if($method=="save"){
$qry="INSERT INTO tbl_reg(name) VALUES('$val')";
$rs = mysql_query($qry);
}
if($method=="delete"){
$qry="DELETE FROM tbl_reg WHERE id=$val";
$rs = mysql_query($qry);
}
if($method=="edit"){
$qry="UPDATE tbl_reg SET name='$val' WHERE id=$id";
$rs = mysql_query($qry);
}
?>
<table cellspacing="0">
<tr align="center">
<td style="border-bottom: 1px solid #000; border-left: 1px solid #000; border-top: 1px solid #000;" width="100"> NAME
</td>
<td style="border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; border-top: 1px solid #000;" width="100"> ACTIONS
</td>
</tr>
<?php
$qry="SELECT id,name from tbl_reg order by id";
$rs = mysql_query($qry);
while($rows=mysql_fetch_array($rs)){
?>
<tr>
<td style="border-bottom: 1px solid #000; border-left: 1px solid #000; border-top: 0px solid #000;" width="100">
<?php echo $rows["name"]; ?>
</td>
<td align="center" style="border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; border-top: 0px solid #000;" width="100">
<input type="button" id="edit" onclick="document.getElementById('name').value='<?php echo $rows["name"]; ?>';document.getElementById('ids').value='<?php echo $rows["id"]; ?>'" value="Edit"/> <input type="button" id="del" onclick="del(<?php echo $rows["id"]; ?>)" value="Delete"/>
</td>
</tr>
<?php
}
?>
</table>