When I tried to make an update to First_Name and Last_Name to database, an empty form is passed to database as a result no information is updated. Please I need help?
Here is the work so far.... index.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="disp_data"></div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#disp_data').html(data);
}
});
}
fetch_data();
//edit
$(document).on('click', '#edit', function(){
var id=$(this).data("id4");
//var first_name = $('#first_name').text();
//var last_name = $('#last_name').text();
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
if(id == '')
{
alert("Id is assigned automatically..");
return false;
}
if(first_name == '')
{
alert("Enter First Name");
return false;
}
if(last_name == '')
{
alert("Enter Last Name");
return false;
}
if(confirm("Are you sure you want to edit this?"))
{
$.ajax({
url:"edit.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
if(data==1) {
alert('data edited Successfully ....!');
}
fetch_data();
}
});
}
});
});
</script>
select.php
<?php
$db = new PDO (
'mysql:host=localhost;dbname=db_name;charset=utf8',
'root', // username
'' // password
);
$output = '';
$result = $db->prepare('SELECT * FROM empinfo ORDER BY id DESC');
$result->execute(array());
$count = $result->rowCount();
$output .= '
<div align="center">
<table border="1" bordercolor="#00CCCC">
<tr>
<th width="10%">Id</th>
<th width="40%">First Name</th>
<th width="40%">Last Name</th>
</tr>';
if($count > 0)
{
while($row = $result->fetch()){
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="first_name" first_name="'.$row["first_name"].'" contenteditable>'.$row["first_name"].'</td>
<td class="last_name" first_name="'.$row["last_name"].'" contenteditable>'.$row["last_name"].'</td>
<td><button type="button" name="edit" data-id4="'.$row["id"].'" id="edit">Edit</button></td>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
</tr>
';
}
else
{
$output .= '<tr>
<td colspan="4">Data not Found</td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>
edit.php
<?php
error_reporting(0);
$db = new PDO (
'mysql:host=localhost;dbname=chat;charset=utf8',
'root', // username
'' // password
);
$id = $_POST["id"];
$fn = $_POST["first_name"];
$ln = $_POST["last_name"];
$update1 = $db->prepare('
UPDATE empinfo set
first_name = :first_name,last_name=:last_name
WHERE id= :id');
if($update1->execute(array(
':first_name' => $fn,':last_name' => $ln,
':id' => $id))){
echo 'Data Updated';
}
?>
i see that in your edit.php you are trying to get firstname and lastname values but withous sending them from your JS part which is result no information in the edit.php so i suggest you to send them with your ajax request so that you can get them :
if(confirm("Are you sure you want to edit this?"))
{
$.ajax({
url:"edit.php",
method:"POST",
data:{"id":id,"first_name":first_name,"last_name":last_name},
dataType:"text",
success:function(data){
if(data==1) {
alert('data edited Successfully ....!');
}
so now you have sent the desired values with an ajax request , so you can get them easily in your edit.php by typing $fn = $_POST["first_name"]; i hope it was helpful
Here are some updates that might help:
https://jsfiddle.net/Twisty/t2pgt267/
HTML
<div class="container">
<div id="disp_data">
<div align="center">
<table border="1" bordercolor="#00CCCC">
<tr>
<th width="10%">Id</th>
<th width="40%">First Name</th>
<th width="40%">Last Name</th>
</tr>
<tr>
<td>998</td>
<td class="first_name" data-first-name="Jane" contenteditable>Jane</td>
<td class="last_name" data-last-name="Smith" contenteditable>Smith</td>
<td>
<button type="button" class="edit_button" name="edit" data-name-id="999">Edit</button>
</td>
</tr>
<tr>
<td>999</td>
<td class="first_name" data-first-name="John" contenteditable>John</td>
<td class="last_name" data-last-name="Smith" contenteditable>Smith</td>
<td>
<button type="button" class="edit_button" name="edit" data-name-id="999">Edit</button>
</td>
</tr>
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
</tr>
</table>
</div>
</div>
</div>
jQuery
$(document).ready(function() {
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#disp_data').html(data);
}
});
}
fetch_data();
//edit
$(document).on('click', '.edit_button', function(e) {
var id = $(this).data("name-id");
var first_name = $(this).closest("tr").find(".first_name").val();
var last_name = $(this).closest("tr").find(".last_name").val();
if (id == '') {
alert("Id is assigned automatically..");
return false;
}
if (first_name == '') {
alert("Enter First Name");
return false;
}
if (last_name == '') {
alert("Enter Last Name");
return false;
}
if (confirm("Are you sure you want to edit this?")) {
$.ajax({
url: "edit.php",
method: "POST",
data: {
"id": id,
"first_name": first_name,
"last_name": last_name
},
dataType: "text",
success: function(data) {
if (data == 1) {
alert('data edited Successfully ....!');
}
fetch_data();
}
});
}
});
});