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>

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


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

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


EmoticonEmoticon