Simple CRUD Operation Without Page Refresh Using PHP with Ajax .


index.php

     
<?php
include "classCrud.php";
$obj = new Class_crud;
$con = "id != ''";
$result = $obj->get_data("employee" , $con , "*");
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>crud opeartion using php with ajax .</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
</div>
<div class="container-fluid">
<div class="col-md-8">
    <div class="form-area">  
        <br style="clear:both">
        <h3 style="margin-bottom: 25px;"><button type="button" name="form_toggle" id="form_toggle" class="btn btn-success">Add</button>&nbsp;&nbsp;User List &nbsp;</h3>
        <div class="col-md-8" id="form_section" style="margin-bottom:15px;">
    <div class="form-area">  
        <form role="form" id="user_registration">
        <br style="clear:both">
                    <h3 style="margin-bottom: 25px;">User Registration Form</h3>
    				<div class="form-group">
						<input type="text" class="form-control" id="name" name="name" placeholder="Name" >
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="email" name="email" placeholder="Email" >
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" >
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
					</div>
                    <div class="form-group">
						<input type="file" class="form-control" id="profile_photo" name="profile_photo" placeholder="Subject" >
					</div>
                    <div class="form-group">
                    <textarea class="form-control" name="about" type="textarea" id="message" placeholder="About Details" maxlength="140" rows="7"></textarea>
                        <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>                    
                    </div>
                   <div id="response"></div>
        <button type="submit" id="submit_button" name="user_submit" class="btn btn-primary pull-right" value="user_submit">Submit </button>
        </form>
    </div>
</div>   
        <div id="response_result"></div>
        <table class="table table-responsive table-bordered">
          <thead>
           <th>Image</th>
           <th>Name</th>
           <th>Email</th>
           <th>Mobile</th>
           <th>Reg date</th>
           <th>Action</th>
          </thead>
          <tbody>
            <?php
             if($result != FALSE){
			    foreach($result as $list){
				    ?>
				   <tr>
              <td><img height="50" src="upload/<?php echo $list['profile_img']; ?>" /></td>
              <td><?php if(!empty($list['name'])) echo $list['name']; ?></td>
              <td><?php if(!empty($list['email'])) echo $list['email']; ?></td>
              <td><?php if(!empty($list['mobile'])) echo $list['mobile']; ?></td>
              <td><?php if(!empty($list['created_at'])) echo $list['created_at']; ?></td>
               <td><button type="button" id="<?php echo $list['id']?>" class="delete_row_btn btn btn-danger">Delete</button>&nbsp;
                 <button type="button" data-edit="<?php echo $list['id']?>" class="btn btn-primary edit_btn">Edit</button></td>
            </tr>
				    <?php
				  }
			  }
			 else{
			    ?>
				<tr>
                <td colspan="6"> No Record Found</td>
                </tr>
				<?php
			  } 
			?>
          </tbody>
        </table>   
    </div>
</div>
</div>
<!--Edit Matrimonial Modal code start-->
<div class="modal" id="edit_details" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="text-danger fa fa-times"></i></button>
                    <h4 class="modal-title" id="myModalLabel"><i class="text-muted fa fa-shopping-cart"></i> <strong>Edit User Details </strong> </h4>
                  </div>
                  <div class="modal-body">
                    <form role="form" id="user_registration_edit_form">
                     <br style="clear:both">
    				<div class="form-group">
                      <input type="hidden" name="edit_id" id="edit_id" />
                      <input type="text" class="form-control" id="edit_name" name="edit_name" placeholder="Name" >
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="edit_email" name="edit_email" placeholder="Email" >
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="edit_mobile" name="mobile" placeholder="Mobile Number" >
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="edit_subject" name="subject" placeholder="Subject" required>
					</div>
                    <div id="append_div">
                    </div>
                    <div class="form-group">
						<input type="file" class="form-control" id="edit_profile_photo" name="edit_profile_photo"  >
					</div>
                    <div class="form-group">
                    <textarea class="form-control" name="about" type="textarea" id="edit_message" placeholder="About Details" maxlength="140" rows="7"></textarea>
                        <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>                    </div>
                   <div id="response_edit"></div>
        <button type="submit" id="user_record_edit" name="user_record_edit" class="btn btn-primary " value="user_record_edit">Submit </button>
        </form>
                  </div>
                  <div class="modal-footer">       
                </div>
              </div>
            </div>
            </div>
<!--End-->
<script src="custom.js"></script>
</body>
</html>

     
    
 
 

custom.js

     
$(document).ready(function(e) {
 $(document).on('change','#edit_profile_photo',function(){
   $("#img_preview").remove();
   $("#copy_image").remove();
 });
  /*Edit and fetch data and fill in */
  $(document).on('click','.edit_btn',function(){
    var edit_id = $(this).data('edit');
	var con = confirm("Are you sure want to Edit this record .");
			 $('#edit_id').val(" ");
	     $("#edit_name").val(" ");
			 $("#edit_email").val(" ");
			 $("#edit_mobile").val(" ");
			 $("#edit_subject").val(" ");
			 $("#edit_message").val(" ");
	 if( con == true){
	   $.ajax({
		  url: "insert.php",
		  type: "GET",        
		  data:{ edit_id:edit_id , get_single:'get_single' },
		  success: function(data){
			 var parseJson = jQuery.parseJSON(data);
			 $("#edit_id").val(parseJson.id);
			 $("#edit_name").val(parseJson.name);
			 $("#edit_email").val(parseJson.email);
			 $("#edit_mobile").val(parseJson.mobile);
			 $("#edit_subject").val(parseJson.subject);
			 $("#edit_message").val(parseJson.about);
			 var html_content = '<img src="upload/'+ parseJson.profile_img +'" height="50" id="img_preview" />'+
								 '<input type="hidden" name="copy_image" id="copy_image" value="'+ parseJson.profile_img +'"  />';
			 $("#append_div").html(html_content);
			 $("#copy_profile_photo").val(parseJson.profile_img);
			 $("#edit_details").modal('show');
			 //$("#response_result").html(data);
		   }	
		 });
	  } 
  });
  /*End*/	
	/*Delete Button code start*/
  $(document).on('click','.delete_row_btn',function(){
    var con = confirm("Are you sure want to delete this ")
	if( con == true){
	   var delete_id = this.id;
	   $("#response_result").html(" ");
		 $('.delete_row_btn').html(' please wait...').attr('disabled',true); 
		  $.ajax({
		  url: "insert.php",
		  type: "GET",        
		  data:{ delete_id:delete_id },
		  success: function(data){
			 $('.delete_row_btn').html('Delete').attr('disabled',false);  
			 $("#response_result").html(data);
		   }	
		 });
	  }
  });
  /*eND*/ 
	 $(document).on('submit',"#user_registration",(function(e) {
	 $('#response').html(" ");
	 $('#submit_button').html('<i style="color:#FFF;" class="fa fa-circle-o-notch fa-spin"></i> please wait...').attr('disabled',true); 
	 e.preventDefault();
      $.ajax({
	  url: "insert.php",
      type: "POST",        
      data: new FormData(this),
      contentType: false,
	  cache: false,
      processData:false,  
      success: function(data){
		 $('#response').html(data);
		 $('#submit_button').html('Submit').attr('disabled',false); 
	   }	
     });
	}));
/* Edit user registration form start*/
 $(document).on('submit','#user_registration_edit_form',(function(e){
    $('#response_edit').html(" ");
	$('#user_record_edit').html('<i style="color:#FFF;" class="fa fa-circle-o-notch fa-spin"></i> please wait...').attr('disabled',true); 
    e.preventDefault();
      $.ajax({
	    url: "update.php",
      type: "POST",        
      data: new FormData(this),
      contentType: false,
	    cache: false,
      processData:false,  
      success: function(data){
		$('#response_edit').html(data);
		$('#user_record_edit').html('Submit').attr('disabled',false); 
		setTimeout(function(){ location.reload() } , 1000);
	   }	
     });  
 }));
/*End */
});
$(document).ready(function(){
    $("#form_section").hide(); 
	$(document).on('click','#form_toggle',function(){
	  $("#form_section").slideToggle();
	});
});
     
    
 
 

custom.css

     
.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
            box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.notice-sm { padding: 10px; font-size: 80%; }
.notice-success { border-color: #80D651; }
.notice-success>strong { color: #80D651; }
.notice-info { border-color: #45ABCD; }
.notice-info>strong { color: #45ABCD; }
.notice-warning { border-color: #FEAF20; }
.notice-warning>strong { color: #FEAF20; }
.notice-danger { border-color: #d73814; }
.notice-danger>strong { color: #d73814; }