Modal keeps disappearing when opening when I use a button
tag to link it with the modal, but if I use an anchor
tag the problem seems to go away. I have a table with users that when I click on that specific user from drop down I would want to view the info associated with that record in the form of a modal.The modal seems to open but disappears or closes immediately under a button
tag but not under an anchor
tag.
The reason I am trying to use a button to open a modal is because I want to check if the "edit" icon is clicked so I can populate the modal with that specific user info. IF someone knows a better way of going about this then please help me.
if (isset($_POST['update'])) {
mysqli_stmt_prepare($stmt, "SELECT * from user where id = ?");
mysqli_stmt_bind_param($stmt, "i", $_POST['update']);
if (!mysqli_stmt_execute($stmt))
exit(mysqli_stmt_error($stmt));
mysqli_stmt_bind_result($stmt, $id, $username, $password, $name, $dob, $phone, $gender, $age);
mysqli_stmt_fetch($stmt);
}
.....
while (mysqli_stmt_fetch($stmt)) {
?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $name; ?></td>
<td><?php echo $username; ?></td>
<td><?php echo "$dob ($age)"; ?></td>
<td><?php echo $phone; ?></td>
<td><?php echo $gender; ?></td>
<td>
<div class="btn-group">
<button class="btn btn-link text-dark dropdown-toggle dropdown-toggle-split m-0 p-0 arrow-none" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class='dripicons-dots-3'></i></button>
<div class="dropdown-menu dashboard-dropdown dropdown-menu-start mt-2 py-1">
<button class="dropdown-item d-flex align-items-center btn btn-sm d-inline-flex align-items-center btn-rounded" data-bs-toggle="modal" data-bs-target="#modal-form" name="update" value="<?php echo $id; ?>"><i class='mdi mdi-account-edit me-1'></i>Edit</button>
</div>
</div>
<button class="btn btn-sm d-inline-flex align-items-center btn-rounded" type="submit" name="delete" value="<?php echo $id; ?>"><i class='mdi mdi-delete'></i></button>
</td>
</tr>
</form>
<?php } ?>
... Modal
<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content rounded ">
<div class="modal-body p-0">
<div class="card p-4">
<button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-header">
<h4 class="modal-title" id="topModalLabel">Course Info</h4>
</div>
<div class="card-body">
<!-- Form -->
<form class="ps-3 pe-3" action="" method="POST">
<div class="mb-3 text-center">
<button class="btn btn-primary" type="submit" name='update'>Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>