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 DeleteThe first thing you should do is create a database and a table with fields: id (auto increment), name (varchar).

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>
      &nbsp;
    </div>
    <div>
    Input Form
    </div>
  <div>
      Name : <input type="text" id="name" placeholder="Type Your Name"> &nbsp; <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>
      &nbsp;
    </div>
    <div>
      Data Table
    </div>
    <div id="showdata"></div>
  </body>
</html>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> <!-- you can download this https://code.jquery.com/jquery-2.1.4.js and place into your local folder then change src="jquery-2.1.4.js" -->
<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"/>&nbsp;<input type="button" id="del" onclick="del(<?php echo $rows["id"]; ?>)" value="Delete"/>
        </td>
</tr>  
<?php
}
?>
</table>

4 komentar

Keren Bro. Jangan Lupa Hosting di https://www.kenceng-solusindo.net

Kalo kolom input nya banyak, berarti declare varabel input nya di button juga banyak y

You have made life easier for many people around by giviung these shoirtcuts. Thank you so much. I will be sharing your blog post so that more and more people can benefit.


EmoticonEmoticon