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.

You aren't getting the user id because the modal code is outside of the while loop it seems. — Jay Blanchard
– Jay Blanchard, Commented Feb 5, 2018 at 18:49
either create the modals inside the while loop (not a good idea), or save the data in an array and loop again to create the modals. — Jeff
– Jeff, Commented Feb 5, 2018 at 18:49
anyway it would be best to only have one modal and apply the id via javascript in runtime. — Jeff
– Jeff, Commented Feb 5, 2018 at 18:50
"what should i do now ?" - Respond to comments? Not leave the post? — Funk Forty Niner
– Funk Forty Niner, Commented Feb 5, 2018 at 18:58

Mikey · Accepted Answer · 2018-02-05 19:40:48Z

2

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.

edited Feb 5, 2018 at 19:40

answered Feb 5, 2018 at 19:25

Mikey

6,7564 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mikey Over a year ago

@ShaidaMuhammad $(function () { is the same as $(document).ready(){.

Shaida Muhammad Over a year ago

Button not working in Datatable pages . only works on 1 page but when i change to 2nd page . again modal not opening . . . .

Shaida Muhammad Over a year ago

i did it for edit also, but how to show existing user data in Modal ?

Collectives™ on Stack Overflow

Can not delete data from MySQL using bootstrap Modal

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related