如何在刪除前顯示確認信息？

Question

我想要獲得確認消息點擊刪除（這可能是一個按鈕或圖像）。如果用戶選擇'Ok'，則刪除完成，否則如果單擊'Cancel'則不會發生任何事情。

我試着在按鈕被點擊時迴應，但回聲使我的輸入框和文本框失去了他們的風格和設計。

Answer 1

這樣寫：

var result = confirm("Want to delete?"); 
if (result) { 
    //Logic to delete the item 
} 

Answer 2

function confirmDelete() 
{ 
var r=confirm("Are you sure you want to delte this image"); 
if (r==true) 
{ 
//User Pressed okay. Delete 

} 
else 
{ 
//user pressed cancel. Do nothing 
    } 
} 
<img src="deleteicon.png" onclick="confirmDelete()"> 

你可能想通過一些數據與confirmDelete以確定哪些項是onclick事件按鈕來刪除

Answer 3

function ConfirmDelete() 
{ 
    var x = confirm("Are you sure you want to delete?"); 
    if (x) 
     return true; 
    else 
    return false; 
} 


<input type="button" Onclick="ConfirmDelete()"> 

Answer 4

可以更好使用方法如下

<a href="url_to_delete" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a> 

Answer 5

function del_confirm(msg,url) 
     { 
      if(confirm(msg)) 
      { 
       window.location.href=url 
      } 
      else 
      { 
       false; 
      } 

     } 



<a onclick="del_confirm('Are you Sure want to delete this record?','<filename>.php?action=delete&id=<?<id> >')"href="#"></a> 

Answer 6

使用jQuery：

$(".delete-link").on("click", null, function(){ 
     return confirm("Are you sure?"); 
    }); 

Answer 7

這是你會怎麼用不顯眼的JavaScript和HTML中的確認消息是保持做到這一點。

<a href="/delete" class="delete" data-confirm="Are you sure to delete this item?">Delete</a> 

這是純香草JS，與IE 9兼容：

var deleteLinks = document.querySelectorAll('.delete'); 

for (var i = 0; i < deleteLinks.length; i++) { 
    deleteLinks[i].addEventListener('click', function(event) { 
     event.preventDefault(); 

     var choice = confirm(this.getAttribute('data-confirm')); 

     if (choice) { 
     window.location.href = this.getAttribute('href'); 
     } 
    }); 
} 

看到它在行動：http://codepen.io/anon/pen/NqdKZq

Answer 8

提高對user1697128（因爲我還不能對此發表評論）

<script> 
    function ConfirmDelete() 
    { 
     var x = confirm("Are you sure you want to delete?"); 
     if (x) 
      return true; 
     else 
     return false; 
    } 
</script>  

<button Onclick="return ConfirmDelete();" type="submit" name="actiondelete" value="1"><img src="images/action_delete.png" alt="Delete"></button> 

將取消表單提交如果按下取消

Answer 9

<SCRIPT LANGUAGE="javascript"> 
function Del() 
{ 
var r=confirm("Are you sure?") 
if(r==true){return href;}else{return false;} 
} 
</SCRIPT> 

你的鏈接吧：

<a href='edit_post.php?id=$myrow[id]'> Delete</a> 

Answer 10

的onclick處理程序應該在函數調用後返回false。例如。

onclick="ConfirmDelete(); return false;">

Answer 11

HTML：

<a href="#" class="delete" data-confirm="Are you sure to delete this item?">Delete</a> 

使用jQuery：

$('.delete').on("click", function (e) { 
    e.preventDefault(); 

    var choice = confirm($(this).attr('data-confirm')); 

    if (choice) { 
     window.location.href = $(this).attr('href'); 
    } 
}); 

Answer 12

我知道這是舊的，但我需要這些答案，非但是alpesh的回答爲我工作，並希望與可能有同樣問題的人分享。

<script>  
function confirmDelete(url) { 
    if (confirm("Are you sure you want to delete this?")) { 
     window.open(url); 
    } else { 
     false; 
    }  
} 
</script> 

普通版本：

<input type="button" name="delete" value="Delete" onClick="confirmDelete('delete.php?id=123&title=Hello')"> 

我的PHP版本：

$deleteUrl = "delete.php?id=" .$id. "&title=" .$title; 
echo "<input type=\"button\" name=\"delete\" value=\"Delete\" onClick=\"confirmDelete('" .$deleteUrl. "')\"/>"; 

這可能不是公開這樣做的正確的方式，但這個工作對我的私人網站。 :)

Answer 13

實踐

<form name=myform> 
<input type=button value="Try it now" 
onClick="if(confirm('Format the hard disk?')) 
alert('You are very brave!'); 
else alert('A wise decision!')"> 
</form> 

網原文：

Answer 14

試試這個。它爲我

<a href="delete_methode_link" onclick="return confirm('Are you sure you want to Remove?');">Remove</a> 

Answer 15

我認爲最簡單的不顯眼的解決辦法是：

鏈接：

<a href="http://link_to_go_to_on_success" class="delete">Delete</a> 

的Javascript：

$('.delete').click(function() { 
    return confirm("Are you sure?"); 
}); 

Answer 16

<a href="javascript:;" onClick="if(confirm('Are you sure you want to delete this product')){del_product(id);}else{ }" class="btn btn-xs btn-danger btn-delete" title="Del Product">Delete Product</a> 


function del_product(id){ 
    $('.process').css('display','block'); 
    $('.process').html('<img src="./images/loading.gif">'); 
    $.ajax({ 
     'url':'./process.php?action=del_product&id='+id, 
     'type':"post", 
     success: function(result){ 
      info=JSON.parse(result); 
      if(result.status==1){ 
      setTimeout(function(){ 
        $('.process').hide(); 
        $('.tr_'+id).hide(); 
       },3000); 
       setTimeout(function(){ 
        $('.process').html(result.notice); 
       },1000); 
      }else if(result.status==0){ 
       setTimeout(function(){ 
        $('.process').hide(); 
       },3000); 
       setTimeout(function(){ 
        $('.process').html(result.notice); 
       },1000); 

       } 
      } 
     }); 
} 

Answer 17

<a href="javascript:;" onClick="if(confirm('Are you sure you want to delete this product')){del_product(id);}else{ }" class="btn btn-xs btn-danger btn-delete" title="Del Product">Delete Product</a> 

<!-- language: lang-js --> 
<script> 
function del_product(id){ 
    $('.process').css('display','block'); 
    $('.process').html('<img src="./images/loading.gif">'); 
    $.ajax({ 
     'url':'./process.php?action=del_product&id='+id, 
     'type':"post", 
     success: function(result){ 
      info=JSON.parse(result); 
      if(result.status==1){ 
       setTimeout(function(){ 
        $('.process').hide(); 
        $('.tr_'+id).hide(); 
       },3000); 
       setTimeout(function(){ 
        $('.process').html(result.notice); 
       },1000); 
      } else if(result.status==0){ 
       setTimeout(function(){ 
        $('.process').hide(); 
       },3000); 
       setTimeout(function(){ 
        $('.process').html(result.notice); 
       },1000); 
      } 
     } 
    }); 
} 
</script> 

Answer 18

設置構造消息，當您刪除在PHP MySQL的&東西...

使用該腳本代碼：

<script> 
    function Conform_Delete() 
    { 
     return conform("Are You Sure Want to Delete?"); 
    } 
</script> 

利用這個HTML代碼：

<a onclick="return Conform_Delete()" href="#">delete</a> 

Answer 19

<form onsubmit="return confirm('Are you sure?');" /> 

效果很好表單。特定於形式的問題：JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

Answer 20

這裏是純JS使用className和綁定事件的另一個簡單示例。

var eraseable = document.getElementsByClassName("eraseable"); 
 

 
for (var i = 0; i < eraseable.length; i++) { 
 
    eraseable[i].addEventListener('click', delFunction, false); //bind delFunction on click to eraseables 
 
} 
 

 
function delFunction(){   
 
    var msg = confirm("Are you sure?");  
 
    if (msg == true) { 
 
     this.remove(); //remove the clicked element if confirmed 
 
    } 
 
    };

<button class="eraseable"> 
 
<img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;"> 
 
Delete me</button> 
 

 
<button class="eraseable"> 
 
<img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;"> 
 
Delete me</button> 
 

 
<button class="eraseable"> 
 
<img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;"> 
 
Delete me</button>

Answer 21

<script> 
function deleteItem() 
{ 
    var resp = confirm("Do you want to delete this item???"); 
    if (resp == true) { 
     //do something 
    } 
    else { 
     //do something 
    } 
} 
</script> 

呼叫使用onClick

Answer 22

使用說明 「上刪除確認信息」 這個功能：

     $.ajax({ 
         type: "POST", 
         contentType: "application/json; charset=utf-8", 
         url: "Searching.aspx/Delete_Student_Data", 
         data: "{'StudentID': '" + studentID + "'}", 
         dataType: "json", 
         success: function (data) { 
          alert("Delete StudentID Successfully"); 
          return true; 
         } 

Answer 23

如果你有興趣在一些快速漂亮的解決方案用css格式完成，您可以使用SweetAlert

$(function(){ 
 
    $(".delete").click(function(){ 
 
     swal({ 
 
\t \t title: "Are you sure?", 
 
\t \t text: "You will not be able to recover this imaginary file!", 
 
\t \t type: "warning", 
 
\t \t showCancelButton: true, 
 
\t \t confirmButtonColor: "#DD6B55", 
 
\t \t confirmButtonText: "Yes, delete it!", 
 
\t \t closeOnConfirm: false 
 
\t }, 
 
\t function(isConfirmed){ 
 
     if(isConfirmed) { 
 
      $(".file").addClass("isDeleted"); 
 
      swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
 
     } 
 
     } 
 
    ); 
 
    }); 
 
});

html { zoom: 0.7 } /* little "hack" to make example visible in stackoverflow snippet preview */ 
 
body > p { font-size: 32px } 
 

 
.delete { cursor: pointer; color: #00A } 
 
.isDeleted { text-decoration:line-through }

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
<script src="http://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script> 
 
<link rel="stylesheet" href="http://t4t5.github.io/sweetalert/dist/sweetalert.css"> 
 

 
<p class="file">File 1 <span class="delete">(delete)</span></p>

Answer 24

Angularjs用JavaScript刪除實例

HTML代碼

<button ng-click="ConfirmDelete(single_play.play_id)" type="submit" name="actiondelete" value="1"><img src="images/remove.png" alt="Delete"></button> 

「single_play.play_id」 是任何angularjs變量假設你想傳遞任何刪除動作中的參數

Angularjs應用模塊

$scope.ConfirmDelete = function(yy) 
     { 
      var x = confirm("Are you sure you want to delete?"); 
      if (x) { 
      // Action for press ok 
       $http({ 
       method : 'POST', 
       url : 'sample.php', 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
       data: $.param({ delete_play_id : yy}) 
       }).then(function (response) { 
       $scope.message = response.data; 
       }); 
      } 
      else { 
      //Action for cancel 
       return false; 
      } 
     } 

Answer 25

var x = confirm("Are you sure you want to send sms?"); 
if (x) 
    return true; 
else 
    return false; 

Answer 26

裏面的代碼，我想提供我這樣做的方法：

<form action="/route" method="POST"> 
<input type="hidden" name="_method" value="DELETE"> 
<input type="hidden" name="_token" value="the_token"> 
<button type="submit" class="btn btn-link" onclick="if (!confirm('Are you sure?')) { return false }"><span>Delete</span></button> 
</form> 

Answer 27

這是更難做它選擇的選項框。 這裏是解決方案：

<select onchange="if (this.value == 'delete' && !confirm('THIS ACTION WILL DELETE IT!\n\nAre you sure?')){this.value=''}"> 
    <option value=''> &nbsp; </option> 
    <option value="delete">Delete Everything</option> 
</select>