update database using ajax php : Here for update or edit data, first we want to fetch existing data from database using Ajax request send to PHP Crud.
update database using ajax php
Here I using main 4 file for update data from MySql database using Ajax.
- connection_db.php
- member_update.php
- member_listing.php
- members.php
jQuery ajax add edit delete records in database using php Example with demo.
Table member_data
Step 1: Crate a Database Table
CREATE TABLE `members_details` ( `id` int(11) NOT NULL, `name` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `mobile` varchar(100) NOT NULL, `address` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
step 2: Connection Database table into PHP
PHP Mysql Create connection
connection_db.php
<?php $servername = "localhost"; $username = "root"; $password = "[email protected]"; $db="pakainfo_db1"; // Create connection $conn = mysqli_connect($servername, $username, $password,$db); ?>
Step 3: update database using ajax jquery
member_update.php
<?php include 'connection_db.php'; $id=$_POST['id']; $name=$_POST['name']; $email=$_POST['email']; $mobile=$_POST['mobile']; $address=$_POST['address']; $sql = "UPDATE `members_details` SET `name`='$name', `email`='$email', `mobile`='$mobile', `address`='$address' WHERE id=$id"; if (mysqli_query($conn, $sql)) { echo json_encode(array("statusCode"=>200)); } else { echo json_encode(array("statusCode"=>201)); } mysqli_close($conn); ?>
Step 4: ajax add edit delete records in database using php
member_listing.php
how to edit data in php?
<?php include 'connection_db.php'; $sql = "SELECT * FROM members_details"; $result = $conn->query($sql); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { ?> <tr> <td><?=$row['name'];?></td> <td><?=$row['email'];?></td> <td><?=$row['mobile'];?></td> <td><?=$row['address'];?></td> <td><button type="button" class="btn btn-success btn-sm update" data-toggle="modal" data-keyboard="false" data-backdrop="static" data-target="#member_details" data-id="<?=$row['id'];?>" data-name="<?=$row['name'];?>" data-email="<?=$row['email'];?>" data-mobile="<?=$row['mobile'];?>" data-address="<?=$row['address'];?>" ">Edit</button></td> </tr> <?php } } else { echo "<tr > <td colspan='5'>No Result found !</td> </tr>"; } mysqli_close($conn); ?>
Don’t Miss : Bootstrap Toggle Switch Update Database Field Using Ajax
Step : 5 Full View Code
update data using ajax in php
members.php
<!DOCTYPE html> <html lang="en"> <head> <title>View 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/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>View Members</h2> <div class="alert alert-success alert-dismissible" id="success" style="display:none;"> <a href="#" class="close" data-dismiss="alert" aria-label="close">ร</a> </div> <table class="table table-bordered table-sm" > <thead> <tr> <th>Member Name</th> <th>Member Email</th> <th>Member Mobile</th> <th>Member Address</th> <th>Action</th> </tr> </thead> <tbody id="table"> </tbody> </table> </div> <!-- Modal Update--> <div class="modal fade" id="member_details" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header" style="color:#fff;background-color: #e35f14;padding:6px;"> <h5 class="modal-title"><i class="fa fa-edit"></i> Update</h5> </div> <div class="modal-body"> <!--1--> <div class="row"> <div class="col-md-3"> <label>Name</label> </div> <div class="col-md-9"> <input type="text" name="name_member" id="name_member" class="form-control-sm" required> </div> </div> <!--2--> <div class="row"> <div class="col-md-3"> <label>Email</label> </div> <div class="col-md-9"> <input type="text" name="email_member" id="email_member" class="form-control-sm" required> </div> </div> <!--3--> <div class="row"> <div class="col-md-3"> <label>mobile</label> </div> <div class="col-md-9"> <input type="text" name="mobile_member" id="mobile_member" class="form-control-sm" required> </div> </div> <!--4--> <div class="row"> <div class="col-md-3"> <label>address</label> </div> <div class="col-md-9"> <input type="text" name="address_member" id="address_member" class="form-control-sm" required> </div> </div> <input type="hidden" name="id_member" id="id_member" class="form-control-sm"> </div> <div class="modal-footer" style="padding-bottom:0px !important;text-align:center !important;"> <p style="text-align:center;float:center;"><button type="submit" id="update_data" class="btn btn-default btn-sm" style="background-color: #e35f14;color:#fff;">Save</button> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal" style="background-color: #e35f14;color:#fff;">Close</button></p> </div> </div> </div> </div> <!-- Modal End--> <script> $(document).ready(function() { $.ajax({ url: "member_listing.php", type: "POST", cache: false, success: function(dataResult){ $('#table').html(dataResult); } }); $(function () { $('#member_details').on('show.bs.modal', function (event) { var button = $(event.relatedTarget); /*Button that triggered the modal*/ var id = button.data('id'); var name = button.data('name'); var email = button.data('email'); var mobile = button.data('mobile'); var address = button.data('address'); var member = $(this); member.find('#name_member').val(name); member.find('#email_member').val(email); member.find('#mobile_member').val(mobile); member.find('#address_member').val(address); member.find('#id_member').val(id); }); }); $(document).on("click", "#update_data", function() { $.ajax({ url: "member_update.php", type: "POST", cache: false, data:{ id: $('#id_member').val(), name: $('#name_member').val(), email: $('#email_member').val(), mobile: $('#mobile_member').val(), address: $('#address_member').val(), }, success: function(dataResult){ var dataResult = JSON.parse(dataResult); if(dataResult.statusCode==200){ $('#member_details').modal().hide(); alert('Data updated successfully !'); location.reload(); } } }); }); }); </script> </body> </html>
I hope you get an idea about insert delete update data using ajax in php.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโt forget to share.