John Davidson

Message:

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 "

           <span>".$roww['username']."</span>

           <span>".$roww['email']."</span>

           <a onclick='pop()'>Delete</a>



           // Delete modal

           <div id='box'>

                <img src='/assets/images/svg/rf-alert.svg' width='64px'>

                <h1>Attention!</h1>

                <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>

           </div>

       ";

} 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:

HTML:
html

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

×

Are you sure you want to delete this user?

OK
Cancel

JavaScript (script.js):
javascript
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):
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:

javascript
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:

html
Delete


html
Delete


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