Wednesday, 18 December 2013

Code For Insert Display Edit And Delete Records on Same Page Without Page Refresh With The Help Of PHP and AJAX

1.index.php
-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Insert Edit Delete Show same Page</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function(){
$("#done").click(function(){
var data = new FormData($('form')[0]);
data.append("fid",  $("#fid").val());
data.append("fname",  $("#fname").val());
data.append("phone",  $("#phone").val());
data.append("course",  $("#course").val());
data.append("gender",  $('input[id=gender]:checked').val());

$.ajax({
    type: "POST",
    url: "code_insert.php",
    data:data,
        processData: false,  // tell jQuery not to process the data
        contentType: false,
    success: function(msg){
        $("#message").html(msg);

        $("#fid").val('');

        $("#fname").val('');
        
        $("#phone").val('');
        
        $("select#course")[0].selectedIndex = 0;
        
        $('input[id=gender]').removeAttr("checked");

    $("#img").val(''); 
    }

});


});
});

function del_code(ids){

$.ajax({
    type: "POST",
    url: "delete.php",
    data: "ids="+ids ,
    success: function(msg){
        $("#message").html(msg);
       
    }
});

}

function edit_record(ids){

$.ajax({
    type: "POST",
    url: "edit_record.php",
    data: "ids="+ids ,
    success: function(msg){
         
       
        var split_msg = msg.split('#');
                $("#fid").val(split_msg[0]);
        $("#fname").val(split_msg[1]);
        $("#phone").val(split_msg[2]);
        $("#course").val(split_msg[3]);
        $('input[#gender]:checked').val(split_msg[4]);
        $("#img").val(split_msg[5]);
       
    }
});

}

</script>
</head>

<body>

<form id="form1" name="form1" enctype="multipart/form-data">
<table border="1px" align="center">
<input type="hidden" name="fid" id="fid" />
<tr><th colspan="2" align="center">Registration Form</th></tr> 
<tr><th>First Name:</th><td><input type="text" name="fname" id="fname" /></td></tr>
<tr><th>Phone No:</th><td><input type="text" name="phone"  id="phone"/></td></tr>

<tr>
    <th>Select Course</th>
        <td><select id="course">
             <option value="">Please Select</option>
             <option value="java">java</option>
             <option value="php">php</option>
             <option value="c++">c++</option>
             <option value="c#">c#</option> 
              </select>
        </td>
</tr>
<tr>
    <th><input name="radiobutton" type="radio" value="male" id="gender" />male</th>
    <th><input name="radiobutton" type="radio" value="female" id="gender" />female</th>
</tr>
<tr><th>Image:</th><td><input name="img" type="file"  id="img" /></td></tr>
<tr><td colspan="2" align="center"><input type="button" name="Submit" value="Submit" id="done" /></td></tr>

</table>
<br />
  <div id="message">
  <?php
 include ("conn.php");
  $result = mysql_query("SELECT * FROM `user` order by id desc ");
      ?>
      <table border="2" align="center" width="800px">
   <tr>
  <th>S.No</th>
  <th>Image</th>
  <th>First Name</th>
  <th>Phone</th>
  <th>Course</th>
  <th>Gender</th>
  <th colspan="2">Options</th>
  </tr>

      <?php
    $i=0;
      while ($fetch = mysql_fetch_array($result)){
    $i++;
      ?>
     
  <tr align="center">
  <th><?php echo $i; ?> </th>
  <td ><img src="image/<?php echo $fetch['img'] ?>" width=50px height=50px/> </td>
  <td><?php echo $fetch['fname'] ?> </td>
  <td><?php echo $fetch['phone'] ?></td>
  <td><?php echo $fetch['course'] ?></td>
  <td><?php echo $fetch['gender'] ?></td>
  <td><a href="javascript:void (0);" onclick="del_code('<?php echo $fetch['id'] ?>');">Delete</a></td>
  <td><a href="javascript:void (0);" onclick="edit_record('<?php echo $fetch['id'] ?>');">Edit</a></td>
  </tr>
     
     
     
      <?php
      }
      ?>
      </table>
  </div>
  
</form>
</body>
</html>
------------------------------------------------------------------------------------------------------
2.conn.php
------------------
<?php
 mysql_connect('Host Name','User Name','Password') ;
 mysql_select_db("Database Name");
 
?>
------------------------------------------------------------------------------------------------------
3.code_insert.php
----------------------------
<?php
include ("conn.php");
  $id = $_REQUEST['fid'];
  $fname = $_REQUEST['fname'];
  $phone = $_REQUEST['phone'];
  $course = $_REQUEST['course'];
  $gender = $_REQUEST['gender'];
  $tempName = $_FILES['img']['tmp_name'];
  $imgName = $_FILES['img']['name'];
  $path = "image/";
   move_uploaded_file($tempName, $path.$imgName) ;
    if(empty($id)){
  $sql1 = mysql_query("INSERT INTO `user` (`fname`,`phone`,`course`,`gender`,`img`) values ('$fname','$phone','$course','$gender','$imgName')") or die (mysql_error());
    }else{
        $sql2 =mysql_query("Update `user` set `fname`='$fname',`phone`='$phone',`course`='$course',`gender`='$gender',img='$imgName' where `id`='$id' ") ;
    }
  if(isset($sql1)){
      echo "inserted";
  }
  else{
      echo "updated";
  }
      $result = mysql_query("SELECT * FROM `user` order by id desc");
      ?>
      <table border="2" align="center" width="800px">
  <tr>
  <th>S.No</th>
  <th>Image</th>
  <th>First Name</th>
  <th>Phone</th>
  <th>Course</th>
  <th>Gender</th>
  <th colspan="2">Options</th>
  </tr>
  <?php
    $i=0;
      while ($fetch = mysql_fetch_array($result)){
    $i++;
      ?>
   <tr align="center">
  <th><?php echo $i; ?> </th>
  <td><img src="image/<?php echo $fetch['img'] ?>" width=50px height=50px/> </td>
  <td><?php echo $fetch['fname'] ?> </td>
  <td><?php echo $fetch['phone'] ?></td>
  <td><?php echo $fetch['course'] ?></td>
  <td><?php echo $fetch['gender'] ?></td>
  <td><a href="javascript:del_code('<?php echo $fetch['id'] ?>');">delete</a></td>
  <td><a href="javascript:edit_record('<?php echo $fetch['id'] ?>');">edit</a></td>
  </tr>
     
      <?php
      }
      ?>
      </table>

------------------------------------------------------------------------------------------------------

4.edit_record.php
----------------------------
<?php 
 include ("conn.php");
  $id = $_REQUEST['ids'];
  $result = mysql_query("SELECT * FROM `user` where id = '".$id."' ");
  $fetch = mysql_fetch_array($result);

  echo $fetch['id'].'#'.$fetch['fname'].'#'.$fetch['phone'].'#'.$fetch['course'].'#'.$fetch['gender'].'#'.$fetch['img'];
  ?> 

------------------------------------------------------------------------------------------------------

5.delete.php
--------------------
<?php
include ("conn.php");
  
  $id = $_REQUEST['ids'];
  
  $sql = mysql_query("DELETE FROM user where id = '".$id."'");
  if($sql){
      echo "data delete successfully";
      $result = mysql_query("SELECT * FROM `user` order by id desc");
      ?>
      <table border="2" align="center" width="800px">      <tr>
  <th>S.No</th>
  <th>Image</th>
  <th>First Name</th>
  <th>Phone</th>
  <th>Course</th>
  <th>Gender</th>
  <th colspan="2">Options</th>
  </tr>
  <?php
    $i=0;
      while ($fetch = mysql_fetch_array($result)){
    $i++;
      ?>
   <tr align="center">
  <th><?php echo $i; ?> </th>
  <td><img src="image/<?php echo $fetch['img'] ?>" width=50px height=50px/> </td>
  <td><?php echo $fetch['fname'] ?> </td>
  <td><?php echo $fetch['phone'] ?></td>
  <td><?php echo $fetch['course'] ?></td>
  <td><?php echo $fetch['gender'] ?></td>
  <td><a href="javascript:del_code('<?php echo $fetch['id'] ?>');">delete</a></td>
  <td><a href="javascript:edit_record('<?php echo $fetch['id'] ?>');">edit</a></td>
  </tr>
      <?php
      }
      ?>
      </table>
      <?php

  }
  else{
      echo "your data not be deleted";
  }
  ?>

------------------------------------------------------------------------------------------------------

6.database(Table name user)
----------------------------------------------- 
-- phpMyAdmin SQL Dump
-- version 3.4.10.1deb1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Dec 18, 2013 at 05:38 PM
-- Server version: 5.5.34
-- PHP Version: 5.3.10-1ubuntu3.9

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `regajax`
--

-- --------------------------------------------------------

--
-- Table structure for table `user`
--

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `fname` varchar(50) NOT NULL,
  `phone` varchar(50) NOT NULL,
  `course` varchar(20) NOT NULL,
  `gender` varchar(255) NOT NULL,
  `img` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

--
-- Dumping data for table `user`
--

INSERT INTO `user` (`id`, `fname`, `phone`, `course`, `gender`, `img`) VALUES
(7, 'Nadeem Haidar', '9810825299', 'php', 'male', 'nadeem_photo.jpg'),
(10, 'Haroon', '33333', 'php', 'male', 'nadeem_s2.jpg'),
(11, 'Mohd Tauheed', '454545454', 'c++', 'male', 'birthDay2.jpg'),
(12, 'Roshan', '111111111', 'java', 'male', 'nadeem.jpg');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

------------------------------------------------------------------------------------------------------

7- Create A Folder
-----------------------------
create a folder in yor project which name is "image".

------------------------------------------------------------------------------------------------------

only copy and past this code and run easily this code

Thanks For Reading My Blog



Posted by at No comments:
Subscribe to: Posts (Atom)