如何在删除前显示确认消息？

Question

我想在点击删除时收到确认消息(这可能是按钮或图像).如果用户选择' Ok'则删除完成,否则如果' Cancel'被点击则没有任何反应.

当点击按钮时我试着回应这个,但回声的东西使我的输入框和文本框失去了他们的风格和设计.

Answer 1

onclick在按钮的情况下写这个:

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

Answer 2

你可以更好地使用如下

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

Answer 3

这就是你如何用不引人注目的JavaScript和HTML中保存的确认消息来实现的.

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

这是纯粹的vanilla 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 4

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 5

试试这个.这个对我有用

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

Answer 6

改进了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 7

如果您对完成 css 格式的一些快速漂亮的解决方案感兴趣，您可以使用SweetAlert

$(function(){
  $(".delete").click(function(){
      swal({   
          title: "Are you sure?",   
          text: "You will not be able to recover this imaginary file!",   
          type: "warning",   
          showCancelButton: true,   
          confirmButtonColor: "#DD6B55",   
          confirmButtonText: "Yes, delete it!",   
          closeOnConfirm: false 
      }).then(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="https://unpkg.com/sweetalert/dist/sweetalert.min.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 8

我想提供我这样做的方式:

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

这很简单，只需一行代码

<a herf="#" title="delete" class="delete" onclick="return confirm('Are you sure you want to delete this item')">Delete</a>

Answer 10

HTML

<input onclick="return myConfirm();" type="submit" name="deleteYear" class="btn btn-danger" value="Delete">

Javascript

<script>
function myConfirm() {
  var result = confirm("Want to delete?");
  if (result==true) {
   return true;
  } else {
   return false;
  }
}

Answer 11

可以简化为：

<button onclick="return confirm('Are you sure you want to delete?');" />