Editing table data using php, PDO, and Ajax - php

Question

I have a data table that displays the counter table in the database.
It has create and edit buttons, each linked to a pop-up modal. The create button works fine, but I'm having an issue with the edit button.
When I click the edit button in a row, it's supposed to retrieve the data from the database table and display them in the text fields of the edit modal.
The data gets retrieved without any issues. But, the only thing that gets displayed in the edit modal is the id. The rest of the data gets displayed in the create modal.
I tried to find the error but I couldn't figure it out yet.
This is the counter table
CREATE TABLE IF NOT EXISTS `counter` (
`id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT,
`name` varchar(50) DEFAULT NULL,
`description` varchar(255) DEFAULT NULL,
`created_at` date DEFAULT NULL,
`updated_at` date DEFAULT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8;
Here's how the code goes.
create modal
<div id="addModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Counter</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="" method="post" id="form-data" novalidate>
<div class=" form-group">
<label>Counter Name</label>
<input type="text" name="name" id="name" class="form-control" required>
</div>
<div class=" form-group">
<label>Description</label>
<textarea name="desc" id="desc" class="form-control" rows="4" cols="50" required></textarea>
</div>
<div class="form-group">
<label>Status</label><br>
<input type="radio" id="status" name="status" value="1" checked required>
<label for="avtive">Active</label><br>
<input type="radio" id="status" name="status" value="0">
<label for="avtive">Inactive</label><br>
</div>
<div class="form-group">
<input type="reset" class="btn btn-secondary" />
<input type="submit" id="insert" name="insert" value="Add Counter" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
edit modal
<div id="editModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Counter</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="" method="post" id="edit-form-data" novalidate>
<input type="text" name="id" id="id">
<div class=" form-group">
<label>Counter Name</label>
<input type="text" name="name" id="name" class="form-control" required>
</div>
<div class=" form-group">
<label>Description</label>
<textarea name="desc" id="desc" class="form-control" rows="4" cols="50" required></textarea>
</div>
<div class="form-group">
<label>Status</label><br>
<input type="radio" id="status" name="status" value="1" checked required>
<label for="avtive">Active</label><br>
<input type="radio" id="status" name="status" value="0">
<label for="avtive">Inactive</label><br>
</div>
<div class="form-group">
<input type="reset" class="btn btn-secondary" />
<input type="submit" id="update" name="update" value="Edit Counter" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
script
<script>
$(document).ready(function() {
//edit ajax request
$("body").on("click", ".editBtn", function(e) {
// console.log("working");
e.preventDefault();
edit_id = $(this).attr('id');
$.ajax({
url: "../../php/admin-action.php",
type: "POST",
data: {
edit_id: edit_id
},
success: function(response) {
data = JSON.parse(response);
// console.log(data);
$("#id").val(data.id);
$("#name").val(data.name);
$("#desc").val(data.description);
$("#status").val(data.status);
},
error: function(response) {
toastr.error('Error detected while adding, Please try again later!');
}
})
})
// update ajax request
$("#update").click(function(e) {
if ($("#edit-form-data")[0].checkValidity()) {
e.preventDefault();
$.ajax({
url: "../../php/admin-action.php",
type: "POST",
data: $("#edit-form-data").serialize() + "&action=update",
success: function(response) {
toastr.success('Counter edited successfully!');
setInterval(2000);
$("#editModal").modal('hide');
$("#edit-form-data")[0].reset();
showAllCounters();
},
error: function(response) {
toastr.error('Error detected while editing, Please try again later!');
}
})
}
})
});
</script>
admin-action.php
// handle view counter list
if (isset($_POST['action']) && $_POST['action'] == 'view') {
$output = '';
$data = $db->read_counter();
if ($db->totalRowCount_counter() > 0) {
$output .= '<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Counter</th>
<th>Description</th>
<th>Created Date</th>
<th>Updated Date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>';
foreach ($data as $row) {
$output .= ' <tr>
<td>' . $row['id'] . '</td>
<td>' . $row['name'] . '</td>
<td>' . $row['description'] . '</td>
<td>' . $row['created_at'] . '</td>
<td>' . $row['updated_at'] . '</td>
<td>' . $row['status'] . '</td>
<td class="project-actions text-right">
<a class="btn btn-primary btn-sm viewBtn" id="' . $row['id'] . '">
<i class="fas fa-folder">
</i>
View
</a>
<a class="btn btn-info btn-sm editBtn" data-toggle="modal" data-target="#editModal" id="' . $row['id'] . '">
<i class="fas fa-pencil-alt">
</i>
Edit
</a>
<a class="btn btn-danger btn-sm dltBtn" id="' . $row['id'] . '">
<i class="fas fa-trash">
</i>
Delete
</a>
</td></tr>';
}
$output .= '</tbody></table>';
echo $output;
} else {
echo '<h3 class="text-center text-secondary mt-5">:(No counters present in the database!)</h3>';
}
// print_r($data);
}
if (isset($_POST['action']) && $_POST['action'] == 'insert') {
$name = $_POST['name'];
$desc = $_POST['desc'];
$status = $_POST['status'];
$db->insert_counter($name, $desc, $status);
}
if (isset($_POST['edit_id'])) {
$id = $_POST['edit_id'];
$row = $db->getCounterByID($id);
echo json_encode($row);
}
if (isset($_POST['action']) && $_POST['action'] == 'update') {
$id = $_POST['id'];
$name = $_POST['name'];
$desc = $_POST['desc'];
$status = $_POST['status'];
$db->update_counter($id, $name, $desc, $status);
}
admin-db.php
public function getCounterById($id)
{
$sql = "SELECT * FROM counter WHERE id = $id";
$stmt = $this->conn->prepare($sql);
$stmt->execute(['id' => $id]);
$result = $stmt->fetch(PDO::FETCH_ASSOC);
return $result;
}
public function update_counter($id, $name, $desc, $status)
{
$sql = "UPDATE counter SET name=:name, desc=:desc,status=:status WHERE id = :id ";
$stmt = $this->conn->prepare($sql);
$stmt->execute(['name' => $name, 'desc' => $desc, 'status' => $status, 'id' => $id]);
return true;
}
I'm posting all of the code because I'm not exactly sure where the problem is. Apologies for making it so long.

Answer 1

FIRST OF ALL
You should not use the same value for HTML id attribute. You used in both create and edit form the same ids for the input fields. The value of the id attribute has to be unique on the entire HTML page, even if some parts are hidden.
CURRENT BEHAVIOR
Your create form does not have an input field with attribute id='id', that is why the corresponding input field is filled after the ajax request.But the other 4 input fields exist in both forms. Because the create form is placed before the update form in your HTML content, the input fields of create form are filled.
SOLUTION
Please change your success function of your .editBtn click handler like this:
success: function(response) {
data = JSON.parse(response);
// console.log(data);
let $form = $('#edit-form-data');
let radioId = data.status === "1" ? "#editStatusActive" : "#editStatusInactive";
$form.find("input[id='id']").val(data.id);
$form.find("input[name='name']").val(data.name);
$form.find("[name='desc']").val(data.description);
$form.find(radioId).click();
},
},
Then update the form group for status in your update form like this:
<div class="form-group">
<label>Status</label><br>
<input type="radio" name="status" id="editStatusActive" value="1" checked required>
<label for="editStatusActive">Active</label><br>
<input type="radio" name="status" id="editStatusInactive" value="0">
<label for="editStatusInactive">Inactive</label><br>
</div>