modal not letting user choose an option

Question

I am trying to have a pop up modal for confirmation if the user wants to delete a certain item. However, when user clicks delete the modal pops up for a split second and directly deletes the item. The button is the hyperlink form.

Code for the delete button:

<a  onclick="confirmDelete(this);" href="add_equipment_process.php?delete=<?php echo $data['id']; ?>" class="btn btn-danger" data-id="<?php echo $data['id'];?>" > Delete

Code for delete process:

if (isset($_GET['delete'])) {
    $id = $_GET['delete'];
    $mysqli->query("DELETE FROM equipment WHERE id=$id") or die($mysqli->error);

    $_SESSION['message'] = "Equipment  has been deleted successfully.";
    $_SESSION['message_type'] = "success";

    header("Location: add_equipment.php");

}

Delete function

function confirmDelete(self) {
    var id = self.getAttribute("data-id");
 
    document.getElementById("deletedata").id.value = id;
    $("#myModal").modal("show");

Code for the confirmation modal:

<div id="myModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header">
                <h4 class="modal-title">Delete User</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <p>Are you sure you want to delete this equipement ?</p>
                <form method="POST" action="add_equipment.php" id="deletedata">
                    <input type="hidden" name="id">
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" id="deletedata"  name="delete" form="deletedata" class="btn btn-danger">Delete</button>
            </div>

        </div>
    </div>
</div>

The add_equipment.php is the file which has the delete button, add_equipment_process.php is the file that has the deletion process.

I have also tried another way with button for which all the code above is same just the button code is like this:

<button type="button" class="btn btn-danger" data-id="<?php echo $data['id']; ?>" onclick="confirmDelete(this);" href="add_equipment_process.php?delete=<?php echo $data['id']; ?>">
Delete
</button>

The problem with the button is that it shows the modal but when I click on the delete button it doesn't do anything. :( Please tell me what I am doing wrong. I want my code to ask user for confirmation for deleting certain item before deleting. I have seen several solutions for this on here, but most of them were just to add scripts. And I already have the necessary scripts in my head tag.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

You have not shown a crucial component of your code - the `confirmDelete` function. — El_Vanja, Mar 23 '21 at 10:42
As I suspected - you're not preventing the default behaviour (which would be "take me to the page from `href`). You'd be better off creating a button (not tied to a form), so that only the confirmation in the modal can actually fire the delete action. To make your modal do that, all you need to do is place the button inside the form tag (currently it's placed after the form and therefore cannot submit). And don't forget to change your PHP to expect `$_POST` instead of `$_GET`. — El_Vanja, Mar 23 '21 at 11:09
Aside from that, please note that building queries this way is unsafe as it's open to SQL injection. You should switch to prepared statements to [prevent it](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). It's also a bad idea to output the mysqli error as it can potentially leak sensitive information, see [mysqli or die, does it have to die?](https://stackoverflow.com/questions/15318368/mysqli-or-die-does-it-have-to-die) — El_Vanja, Mar 23 '21 at 11:13
@El_Vanja I did what as you suggested but I am getting this error: Fatal error: Uncaught Error: Call to a member function bind_param() on bool in C:\xampp\htdocs\\rw5m\add_equipment_process.php:61 Stack trace: #0 C:\xampp\htdocs\add_equipment.php(19): require_once() #1 {main} thrown in C:\xampp\htdocs\rw5m\add_equipment_process.php on line 61 — Accidentally Inked, Mar 23 '21 at 12:37
See how to find out the [actual mysqli error](https://stackoverflow.com/questions/22662488/mysqli-fetch-assoc-expects-parameter-call-to-a-member-function-bind-param/22662582#22662582). — El_Vanja, Mar 23 '21 at 12:41
@El_Vanja I moved the delete button into form and my delete process is like this: if (isset($_POST['delete'])) { $id = $_POST['delete']; $stmt = $mysqli->prepare('DELETE FROM equipment WHERE id=$id'); $stmt->bind_param('s', $name); $stmt->execute(); $result = $stmt->get_result(); while ($row = $result->fetch_assoc()) { $_SESSION['message'] = "Equipment has been deleted successfully."; $_SESSION['message_type'] = "success"; header("Location: add_equipment.php"); } } — Accidentally Inked, Mar 23 '21 at 12:41
Please add changes by editing the question instead of using comments (as you can see for yourself, multiline code isn't very readable in comments). But I can see the error, you added binding, but you didn't change your query (you still insert the variable directly instead of replacing it with a placeholder - read the example of prepared statements again to see what you missed). — El_Vanja, Mar 23 '21 at 12:43
@El_Vanja Thank you very very much. I just double checked the prepare statements and it works now. Really appreciate your help. Now I will edit my question and put my solution as well? or should I choose "answer my question" ? — Accidentally Inked, Mar 23 '21 at 13:03
Don't place answers in questions - that way the filters (and users) cannot recognize it as answered. You can answer your own questions. — El_Vanja, Mar 23 '21 at 13:04

score 0 · Answer 1 · answered Mar 23 '21 at 14:42

I made changes to the modal and put the buttons inside form tag

 <div class="modal-body">
<p>Are you sure you want to delete this equipement?</p>
<form method="POST" action="add_equipment.php" id="deletedata">
 <input type="hidden" name="id">
   <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" class="btn btn-success">Close </button>
 <button type="submit" id="deletedata"  name="delete" form="deletedata" class="btn btn-danger">Delete </button>
</div>

For delete process I used prepared statements, to avoid sql injection problem.

if (isset($_POST['delete'])) {
$stmt = $mysqli->prepare('DELETE FROM equipment WHERE id= ?');
$stmt->bind_param("i", $_POST['id']);
$stmt->execute();
$_SESSION['message'] = "Equipment  has been deleted successfully.";
$_SESSION['message_type'] = "success";
$stmt->close();

}

Then it worked.

modal not letting user choose an option

1 Answers1