Can not delete data from MySQL using bootstrap Modal

Question

I have a PHP file manage-users.php which contains bootstrap Data-table. Which shows data from MySQL users Table . code of Data-table is :

<table id="myTable" class="table table-striped table-hover">
    <thead>
        <tr>
            <th>
                <span class="custom-checkbox">
                    <input type="checkbox" id="selectAll">
                    <label for="selectAll"></label>
                </span>
            </th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <?php
            $result = mysqli_query($conn,"SELECT * FROM users") or die("Unable to qet all users data " . mysqli_error($conn));
            while ($row = mysqli_fetch_assoc($result)) {
                echo "<tr>";
                echo '<td>
                <span class="custom-checkbox">
                    <input type="checkbox" id="checkbox1" name="options[]" value="1">
                    <label for="checkbox1"></label>
                </span>
                </td>';
                echo "<td>".$row['FIRST_NAME']."</td>";
                echo "<td>".$row['LAST_NAME']."</td>";
                echo "<td>".$row['EMAIL']."</td>";
                echo "<td>".$row['PHONE']."</td>";
                echo '
                <td>
                    <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
                    <a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>

                </td>
                ';
                echo "</tr>";
            }
        ?>
    </tbody>
</table>

---

In the same page, I have two bootstrap modals to delete and edit data . I'm working on Delete now.

Delete Modal Code is :

<div id="deleteEmployeeModal<?php echo $row['USER_ID']; ?>" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <form>
                    <div class="modal-header">                      
                        <h4 class="modal-title">Delete User</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">                    
                        <p>Are you sure you want to delete these Records?</p>
                        <p class="text-warning"><small>This action cannot be undone.</small></p>
                    </div>
                    <div class="modal-footer">
                        <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                        <button class="btn btn-danger"><a href="delete_user_data.php?id=<?php echo $row['USER_ID']; ?>">Delete</a></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

---

Now the problem is that, that i can not delete data because in Delete Modal the $row['USER_ID] is empty. there is no problem in retrieving data from the server because the $row['USER_ID] is showing showing on every user specific delete button. what should i do now ? If question needs more explanation, i'll explain.

Answer 1

Upon opening the modal, you basically set a hidden field so that when you submit the form, it will send delete_user_data.php?id=YOUR-VALUE.

1) Store the ID in the HTML. A good place might be the link that opens the modal. Also, remove data-toggle attribute because we will be opening the modal dynamically.

echo '<a href="#deleteEmployeeModal" class="delete" data-id="' . $row['USER_ID'] . '"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>';

2) Only use one modal for deleting.

<div id="deleteEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- give your form an action and method -->
            <form action="delete_user_data.php" method="GET">
                <div class="modal-header">                      
                    <h4 class="modal-title">Delete User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">                    
                    <p>Are you sure you want to delete these Records?</p>
                    <p class="text-warning"><small>This action cannot be undone.</small></p>
                </div>
                <div class="modal-footer">
                    <!-- add a hidden input field to store ID for next step -->
                    <input type="hidden" name="id" value="" />
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <!-- change your delete link to a submit button -->
                    <button class="btn btn-danger" type="submit">Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>

3) Open the modal dynamically.

$(function () {
    $('a.delete').click(function (e) {
        e.preventDefault();
        var link = this;
        var deleteModal = $("#deleteEmployeeModal");
        // store the ID inside the modal's form
        deleteModal.find('input[name=id]').val(link.dataset.id);
        // open modal
        deleteModal.modal();
    });
});

Use similar approach for doing the Edit modal.