John Davidson

javascript - PHP Delete User Data From Table On Button Click


I have a code that works fine except one thing. When you click onto the Delete button, a modal box appers and it shows 2 buttons. When you click onto the OK button it should delete that user's data which you clicked. But this is deletes the user who has the lowest ID. But if I removes the modal box opening function and simpy just put a href='delete.php?id=".$roww['id']."' it works fine. Any idea how to solve this?

Code from the index.php:

include "dbConn.php"; // Using database connection file here
$records = mysqli_query($db,"select * from accounts"); // fetch data from database
while($data = mysqli_fetch_array($records)) {}

$conn = mysqli_connect("localhost", "root", "", "phplogin");
if ($conn-> connect_error) {
die("Connection failed:". $conn-> connect_error);
$ssql = "SELECT * FROM accounts";
$result = $conn-> query($ssql);
if ($result-> num_rows > 0) {
while ($roww = $result-> fetch_assoc()) {
$id = $roww['id'];
echo "
<a onclick='pop()'>Delete</a>

// Delete modal
<div id='box'>
<img src='/assets/images/svg/rf-alert.svg' width='64px'>
<p>You are going to delete this user permanently.</p>
<a class='close' href='delete.php?id=".$roww['id']."' title='".$roww['id']."'>Delete</a> // This button should delete the data from the MySQL table
<a class='close' onclick='pop()'>Cancel</a>
} else { echo "0 result";}
$conn-> close();

My Answer:
userID' in the button, it works fine. Can someone help me to fix this issue?

Here is my code:


Delete User Data

ID Name Email Action
1 John Doe [email protected]
2 Jane Smith [email protected]

JavaScript (script.js):
function openModal(id) {
document.getElementById("myModal").style.display = "block";
localStorage.setItem("userId", id);

function closeModal() {
document.getElementById("myModal").style.display = "none";

function deleteUser() {
var userId = localStorage.getItem("userId");
window.location.href = "delete.php?id=" + userId;

PHP (delete.php):
if(isset($_GET['id'])) {
$userId = $_GET['id'];
// Delete user data with ID $userId from database
echo "User with ID " . $userId . " has been deleted.";

The issue is that when the OK button is clicked in the modal box, it always deletes the user with the lowest ID (in this case, user with ID 1). This is because the `localStorage.getItem("userId")` in the `deleteUser()` function always retrieves the first stored value, which is the user ID of the first user.

To fix this issue, you can modify the `deleteUser()` function to pass the user ID directly to the `delete.php` file without using `localStorage`. Here's the updated JavaScript code:

function deleteUser(userId) {
window.location.href = "delete.php?id=" + userId;

And update the HTML button to pass the user ID as a parameter to the `deleteUser()` function:



This way, the correct user ID will be passed to the `delete.php` file when the OK button is clicked in the modal box.

Rate this post

3 of 5 based on 9902 votes


© 2024 - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us