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; }
 
 

Tags

PHP 23   Javascript 7   Jquery 10   Html 2   Laravel 11   php array method 1   PHP magic method 2   Programs 5   Interview questions 5   Laravel 8 2   Vue js 6   GIT    Laravel Artisan Command
See Demo Download

Vuejs Article

How to create new or separate routes file in Vue Js?

How to define Middleware in Vue js?

How to define named route in vue js?

What is components? Component in vue js.

How to install vue js using CLI?

How to check the version of vue cli ?

Laravel Article

CRUD operation using Laravel + React js

PHP artisan list commands

How to install React in Laravel 8

How to create laravel seeder?

What is new in laravel 8?

How to define route in laravel ?

Laravel User Auth Logout

How to install laravel set up in your machine

How to ON/OFF your laravel project debugging .

How to image upload in laravel

How to laravel framework project switch from development mode to Production mode

how to redirect http to https in laravel using middleware