Insert Update Delete Using Ajax Jquery


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).

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>
      &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>
Related Post

Post a Comment

11 Comments

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

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

    ReplyDelete
  3. 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.

    ReplyDelete

  4. Hi would you mind stating which blog platform you're using? I'm going to start my own blog soon but I'm having a hard time choosing between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I'm looking for something completely unique. P.S Sorry for getting off-topic but I had to ask! gmail.com login

    ReplyDelete
  5. Get HostGator Coupons & Promo Codes (75% Off) - July 2018 Discounts.

    ReplyDelete
  6. Passing the C_HRHPC_2005 SAP - SAP Certified Application Associate - SAP SuccessFactors for Employee Central VCE Dumps is not a big deal now! You can get most reliable Cisco Certified DevNet Specialist 300-635 Exam VCE from VceTests at very reasonable price. The Cisco Certified DevNet Specialist 300-920 Practice Test Questions comprised of C_HRHPC_2005 Exam VCE Dumps and 300-635 Cisco - Automating Cisco Data Center Solutions exam engine. Our 300-920 Cisco - Developing Applications for Cisco Webex and Webex Devices Exam VCE 2020 study material covers the entire course contents and online 300-635 Practice Tests Dumps prepare you for the actual exam expertly.

    ReplyDelete