模态不允许用户选择一个选项答案

【问题标题】：modal not letting user choose an option模态不允许用户选择一个选项
【发布时间】：2021-06-20 00:06:49
【问题描述】：

如果用户想要删除某个项目，我正在尝试使用弹出模式进行确认。但是，当用户单击删除时，模式会弹出一瞬间并直接删除该项目。按钮是超链接表单。

删除按钮的代码：

<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

删除过程代码：

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");

}

删除函数

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

确认模式代码：

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

add_equipment.php是有删除按钮的文件，add_equipment_process.php是有删除过程的文件。

我还尝试了另一种按钮方式，上面的所有代码都是一样的，只是按钮代码是这样的：

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

按钮的问题在于它显示了模式，但是当我单击删除按钮时它什么也没做。 :( 请告诉我我做错了什么。我希望我的代码在删除之前要求用户确认删除某些项目。我在这里看到了几个解决方案，但其中大多数只是添加脚本。而且我的 head 标签中已经有了必要的脚本。

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

【问题讨论】：

您没有展示代码的关键组件 - confirmDelete 函数。
@El_Vanja 刚刚添加了它。谢谢。
正如我所怀疑的 - 你并没有阻止默认行为（这将是“从href 带我到页面）。你最好创建一个按钮（不绑定到表单），因此只有模态中的确认才能真正触发删除操作。要使您的模态做到这一点，您需要做的就是将按钮放在表单标签内（目前它放在表单之后，因此无法提交） . 并且不要忘记将您的 PHP 更改为期望 $_POST 而不是 $_GET。
除此之外，请注意以这种方式构建查询是不安全的，因为它对 SQL 注入开放。您应该将准备好的语句切换到prevent it。输出 mysqli 错误也是一个坏主意，因为它可能会泄漏敏感信息，请参阅mysqli or die, does it have to die?
@El_Vanja 我按照你的建议做了，但我收到了这个错误：致命错误：未捕获的错误：在 C:\xampp\htdocs\\rw5m\ 中调用 bool 上的成员函数 bind_param() add_equipment_process.php:61 堆栈跟踪：#0 C:\xampp\htdocs\add_equipment.php(19): require_once() #1 {main} 在 C:\xampp\htdocs\rw5m\add_equipment_process.php 第 61 行抛出

标签： php twitter-bootstrap modal-dialog

【解决方案1】：

我对模式进行了更改并将按钮放在表单标签内

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

删除过程我使用prepared statements，以避免sql注入问题。

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();

}

然后它起作用了。

【讨论】：