在刪除數據庫中的行之前顯示確認對話框

Question

請如何顯示確認刪除對話框按鈕。所以如果用戶點擊是，它將繼續刪除，否則它不會刪除該條目。

這是我的代碼工作正常，但我不知道如何使它彈出「你確定要刪除的對話框」

The HTML button 

<a class='btn btn-danger delete_data' id="<?php echo $matched1; ?>">Blast</a> 

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".delete_data").click(function(){ 
       var del_id = $(this).attr('id'); 
       $.ajax({ 
        type: 'POST', 
        url: 'delete.php', 
        data: 'delete_id='+del_id, 
        success: function(data){ 
         if(!data){ 
          window.location.replace("memberpage.php"); 
         } 
         else{ 
          alert('failed'); 
         } 
        } 
       }); 
      }); 
     }); 
    </script> 

delete.php

$username = $_POST['delete_id']; 
    $stmt = $db->prepare("DELETE FROM users WHERE username='".$username."'"); 
    $stmt->execute(); 

謝謝大家幫我出

Answer 1

您可以使用confirm()象下面這樣： -

$(".delete_data").click(function(){ 
    var choice = confirm('Do you really want to delete this record?'); 
     if(choice === true) { 
      var del_id = $(this).attr('id'); 
      $.ajax({ 
       type: 'POST', 
       url: 'delete.php', 
       data: 'delete_id='+del_id, 
       success: function(data){ 
        if(!data){ 
         window.location.replace("memberpage.php"); 
        } 
        else{ 
         alert('failed'); 
        } 
       } 
      }); 
     }else{ 
      return false; 
     } 
}); 

參考： - https://www.w3schools.com/js/js_popup.asp

Answer 2

您可以使用JavaScript confirm。我已更改您的代碼以顯示它是如何顯示的：

<a class='btn btn-danger delete_data' id="<?php echo $matched1; ?>">Blast</a> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".delete_data").click(function(){ 
       var del_id = $(this).attr('id'); 
       if (confirm("Do you really want to remove ?")) { 
        $.ajax({ 
         type: 'POST', 
         url: 'delete.php', 
         data: 'delete_id='+del_id, 
         success: function(data){ 
          if(!data){ 
           window.location.replace("memberpage.php"); 
          } 
          else{ 
           alert('failed'); 
          } 
         } 
        }); 
       } 
      }); 
     }); 
    </script> 

以這種方式，您在詢問用戶是否要刪除數據。如果用戶確認操作，則Javascript確認返回true。如果他點擊取消，則不會執行任何操作。

如果您不喜歡默認的瀏覽器UI，則可以使用選項，如jQuery UI，或者如果您使用的是Bootstrap，則可以使用Bootbox，這是用戶友好且易於使用的。