我想让弹出窗口出现在 php

Question

我正在 php 中制作一个类似论坛的网站，我在每个问题容器内添加了一个按钮以删除论坛上的问题。我正在寻找一种在用户单击删除按钮时显示弹出窗口的方法。我正在使用 bootstrap，我在 bootstrap 网站上发现了一个弹出模式。使用我当前的代码，单击按钮时会出现弹出窗口，并要求用户确认他想删除他的问题。问题是我不知道如何获取用户想要删除的问题的 ID，所以我可以在我的 MySQL 数据库中删除它。

这是我当前的按钮，它在 php echo '...'

中

<div class="col-1" title="delete your comment"><button name="delmsgbtn" class="btn-reseter" type="button" data-bs-toggle="modal" data-bs-target="#delmsg">delete</button></div>

这是 bootstrap 中单击按钮时显示的弹出模式

<div class="modal fade" id="delmsg" tabindex="-1" aria-labelledby="delmsgLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="delmsgLabel">Are you sure you want to delete this message?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
        <button type="button" class="btn btn-danger">delete</button>
      </div>
    </div>
  </div>
</div>

我想将用户重定向到同一页面，但 url 包含问题 ID，因此我可以使用 get 方法获得它。所以我通过添加重定向来修改按钮。

New button also inside a php echo that is why the backslash

<div class="col-1" title="delete your comment"><button name="delmsgbtn" class="btn-reseter" onclick="location.href = \'course.php?courseid='.$_GET["courseid"].'&quesid='.$idQues.'\';" type="button" data-bs-toggle="modal" data-bs-target="#delmsg">delete</button></div>

但是执行此操作时，页面刷新并且弹出窗口消失。你能帮帮我吗

Answer 1

首先，修改模态打开按钮。应该是这样的

<button class="btn-reseter delmsgbtn" data-comment_id="<?= PHP_COMMENT_ID ?>">delete</button>

请务必将 PHP_COMMENT_ID 替换为包含评论 ID 的实际 PHP 变量。

用表单替换模式中的“删除”按钮。

<form method="POST" action="PHP_PROCESS_SCRIPT">
    <input type="hidden" name="comment_id" id="comment_id_input"/>
    <button type="submit" class="btn btn-danger">delete</button>
</form>

确保PHP_PROCESS_SCRIPT指向PHP脚本来处理评论删除。此外，如果适用，请确保在此脚本中确实允许删除评论的用户。

创建点击处理程序来打开模式，而不是内联属性。

<script>
    $('.delmsgbtn').on('click', function() {
        
        //update #comment_id_input in the popup form, 
        //based on data-comment_id added to the button from the first snippet
        $('#comment_id_input').val($(this).data('comment_id')); 

        $('#delmsg').modal('show'); //open the modal
    });
<script>

提交表单时，您连接的 PHP 脚本将获得一个值 $_POST['comment_id']。

或者，您可以从附加到模式内删除按钮的点击处理程序进行 ajax 调用。如果您想防止页面刷新，这会更好。首先把删除按钮修改成这样

<button id="delmsg_submit" type="button" class="btn btn-danger">delete</button>

然后，添加一些点击处理程序

<script>
    var active_comment_id = null;

    $('.delmsgbtn').on('click', function() {

        //update active_comment_id, 
        //based on data-comment_id added to the button from the first snippet
        active_comment_id = $(this).data('comment_id'); 

        $('#delmsg').modal('show'); //open the modal
    });

    $('#delmsg_submit').on('click', function() {
       if(active_comment_id) {
           //send ajax call
       }
    });
<script>

Answer 2

我会将元素的 id 放在 php

喜欢

<button id="element-id-<?php echo $id ?>" class="myBtn" >

然后我会使用 javascript 函数来执行对数据库的调用

<script>
const btn = document.querySelector('.myBtn')

btn.addEventLIstener('click', () => {
  const elementId = this.id //then remove the 'element-id-' from the value
  const data = { id: elementId }
  fetch( URLforBackend, {
   method: 'post',
   headers: {
     'Content-Type': 'application/json'
    }
    body: JSON.stringify(data)
  })
</script>

这会将 ID 提供给您的后端。在 php 中，只需删除

我想让弹出窗口出现在 php

I want to make a popup appear in php

html

php

bootstrap-modal