JavaScript 在 PHP 删除按钮上的确认提示框

Question

当用户点击删除按钮时，我该如何添加JavaScript警告以确认（是或否）？我尝试向警告中添加一个类：

<?php
//$con = mysqli_connect("localhost", "root", "root", "db");
$sql = "SELECT * FROM `uploads` where userId = " . $_SESSION['user'];
$qry = mysqli_query($conn,$sql) or die(mysqli_error($conn));

$table_content = "";

while($row = mysqli_fetch_assoc($qry)){
    $id = $row['id'];
    $name = $row['name'];
    $table_content .= "<tr>
                         <td>
                           <a href='listen.php?id=$id' target='_new'>$name </a>
                         </td>
                         <td>
                           <a href='delete.php?id=$id' type='button' class='btn btn-danger'>delete</a>
                         </td>
                       </tr>";
}

echo "<table>".$table_content."</table>";
?>

- Philly Hanna

---

你尝试了什么？出了什么问题？ - Carcigenicate

你需要在按钮上使用 click 事件。使用 id 来标识按钮，根据它来显示提示或者模态框（推荐）。根据用户的响应，使用 ajax 发送删除请求。 - Kinshuk Lahiri

请参见：https://dev59.com/AWox5IYBdhLWcg3wOyD9 - aprogrammer

https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload - Jai

尝试将确认类添加到按钮，然后添加一个JavaScript点击确认函数（适用于链接），但在PHP代码上无效，如所示。 - Philly Hanna

@PhillyHanna 请检查我的更新答案。 - Bachcha Singh

Answer 1

为了简单起见，看一下这个。

<a onClick="return confirm('Are you sure you want to delete?')" href='delete.php?id=$id' type='button' class='btn btn-danger'>delete</a>

当你调用return false时，实际上是在执行三个完全不同的操作：

• event.preventDefault();
• event.stopPropagation();
• 当被调用时，停止回调函数的执行并立即返回。

由于 confirm 方法返回 true 或 false，我们可以在 onclick 上直接调用它，然后根据返回值来决定行为。

参考: kamesh answer

 <a onClick="return confirm('Are you sure you want to delete?')" href='delete.php?id=$id' type='button' class='btn btn-danger'>delete</a>
       

- Lekens

---

无法加载页面 :( - Philly Hanna

请明确一些，更清晰地解释一下。 - Theophilus Omoregbee

Answer 2

我认为这就是您正在寻找的内容。

<a href='delete.php?id=$id' onclick="return myFunction()" type='button' class='btn btn-danger'>delete</a>

<script>
function myFunction() {
var r = confirm("OK to delete?");
if (r == false) {
   return false;
} 

}
</script>

- D. Pachauri

Answer 3

如果您正在使用Bootstrap，可以试试这个！

https://github.com/delboy1978uk/bs-delete-confirm

如果你还没有使用Bootstrap，不妨试试！只需包含CSS和JS，就可以立即使用一些很棒的功能！这个jQuery删除确认代码使用了Bootstrap模态框，可以在这里看到一个示例 http://getbootstrap.com/javascript/#modals

<a href="http://nasa.gov" class="delete-confirm btn btn-primary">Go!</a>


$(document).ready(function(){
  $('.delete-confirm').deleteConfirm();
});

查看一个工作示例在这里https://jsfiddle.net/myu3kr66/

- delboy1978uk

Answer 4

您可以使用模态框，在删除按钮的点击事件中显示该模态框。在模态框中，分别设置两个按钮，即“是”和“否”，并将它们分别赋予id，如 #yes 和 #no。在点击“是”按钮时，执行删除操作；在点击“否”按钮时，保留原行。

<td><a href='listen.php?id=$id' target='_new'>$name </a></td>
<td><a href='delete.php?id=$id' type='button' id="delete"                             

class='btn btn-danger'>delete</a></td>
 </tr>";
}
echo "<table>".$table_content."</table>"

 <script>

$('#delete).on('click',function(){

 $('#modal').show();
 $('#yes').on('click') {
//   perform delete action.
 }
 }
</script>

- pd1

---

无法加载页面。 - Philly Hanna

这是代码的基本结构，如果你向我展示问题，我可以帮助你解决。 - pd1

Answer 5

请遵循以下步骤。

<a href="javascript:void(0)" onclick="return deleteContent('<?php echo $id; ?>');" type="button" class="btn btn-danger">Delete</a>

脚本

<script>
    function deleteContent(id) {
        if(confirm('Are you sure you want to delete this ?')) {
        window.location='delete.php?id='+id;
        }
    return false;
    }
</script>

已更新

<?php
 $con = mysqli_connect("localhost", "root", "root", "db");
 $sql = "SELECT * FROM `uploads` where userId = " . $_SESSION['user'];
 $qry = mysqli_query($conn,$sql) or die(mysqli_error($conn));

 echo "<table>";
 while($row = mysqli_fetch_assoc($qry)){
      $id = $row['id'];
      $name = $row['name'];
?>
<tr>
<td><a href="javascript:void(0)" onclick="return deleteContent('<?php echo $id; ?>');" type="button" class="btn btn-danger">Delete</a></td>
<td><a href='listen.php?id=<?php echo $id; ?>' target='_new'><?php echo $name; ?> </a></td>
</tr>

<?php } echo "</table>"; ?>

- Bachcha Singh

---

无法加载页面。 - Philly Hanna

我从你的代码中删除了 ?>，因为后面还有更多的 PHP。 - Philly Hanna

加载资源失败：服务器响应状态为500（内部服务器错误），尝试使用和不使用?>。 - Philly Hanna

你看到我在顶部添加的完整代码了吗？ - Philly Hanna

是的，我有，它还是没有工作吗？出现了什么错误？ - Bachcha Singh