How To Update Data In Database Using Ajax With PHP

Project Demo

DATABASE CONNECTION CODE HERE (db.php):

<?php
$conn = mysqli_connect('localhost' , 'root' ,'' ,'db_test');
?>

DATABASE ROW UPDATE CODE HERE (send.php):

<?php
require "db.php";
if(isset($_POST['email'])){
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$email = $_POST['email'];
$id = $_POST['id'];
$query="UPDATE user SET firstName='$firstName' , lastName='$lastName' , email = '$email' WHERE id='$id'";
$result = mysqli_query($conn , $query);
if($result){
echo 'data updated';
}
}
?>

HTML CODE HERE (index.php):

<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$table = mysqli_query($conn ,'SELECT * FROM user');
while($row = mysqli_fetch_array($table)){ ?>
<tr id="<?php echo $row['id']; ?>">
<td data-target="firstName"><?php echo $row['firstName']; ?></td>
<td data-target="lastName"><?php echo $row['lastName']; ?></td>
<td data-target="email"><?php echo $row['email']; ?></td>
<td><a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">Update</a></td>
</tr>
<?php }
?>
</tbody>
</table>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>First Name</label>
<input type="text" id="firstName" class="form-control">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" id="lastName" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" id="email" class="form-control">
</div>
<input type="hidden" id="userId" class="form-control">
</div>
<div class="modal-footer">
<a href="#" id="save" class="btn btn-primary pull-right">Update</a>
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
</div>
</div>
</div>

AJAX AND JAVASCRIPT CODE HERE :

<script type="text/javascript">
$(document).ready(function(){
// append values in input fields
$(document).on('click','a[data-role=update]',function(){
var id = $(this).data('id');
var firstName = $('#'+id).children('td[data-target=firstName]').text();
var lastName = $('#'+id).children('td[data-target=lastName]').text();
var email = $('#'+id).children('td[data-target=email]').text();
$('#firstName').val(firstName);
$('#lastName').val(lastName);
$('#email').val(email);
$('#userId').val(id);
$('#myModal').modal('toggle');
});
// now create event to get data from fields and update in database
$('#save').click(function(){
var id = $('#userId').val();
var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var email = $('#email').val();
$.ajax({
url : 'connection.php',
method : 'post',
data : {firstName : firstName , lastName: lastName , email : email , id: id},
success : function(response){
// now update user record in table
$('#'+id).children('td[data-target=firstName]').text(firstName);
$('#'+id).children('td[data-target=lastName]').text(lastName);
$('#'+id).children('td[data-target=email]').text(email);
$('#myModal').modal('toggle');
}
});
});
});
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *


Vivzon Web Technology is a small company, But the website is a super-innovative company in the field of development. With 3 years of experience, the website is designing and developing in Mumbai. we aim to bring client cost- Read More

Contact Us


Nallasopara West, Mumbai, India

+91-7240052638

+91-9004837569

info@vivzon.com

Copyright © 2017 vivzon. All rights reserved