JavaScript确认对话框

Question

我想在删除按钮上添加确认对话框，询问用户是否确定删除所选项目。

如果不确定，则不应发生任何事情，否则应执行一个URL。

我知道可以通过一些JavaScript代码来实现这个功能，但我正在寻找一种更简洁的解决方案。例如：

<a href="mysite.de/xy/delete" onClick="...">Delete</a>

是否可以在onClick元素中放置整个功能而不需要在页眉中添加额外的Javascript代码？

- DarkLeafyGreen

---

不是JavaScript专家。但是是否有可能编写一个在onClick中调用的函数？ - starcorn

Answer 1

您可以像这样使用 return 返回 confirm()（它返回 true/false）：

<a href="mysite.de/xy/delete" onClick="return confirm('You sure??');">Delete</a>

您可以在此处进行测试

- Nick Craver

---

从技术上讲，这样做是可行的，但我仍然不能推荐这种方式，因为它不是最佳实践。操作应该真正地发布到服务器。 - cspolton

我认为应该使用DELETE而不是GET或POST... - wprl

Answer 2

更好的方法（虽然仍不是理想的）：反其道而行之。除非你使用JavaScript，否则不要让链接执行任何操作。

<a href="#" 
  onclick="if confirm('Sure?') { window.location='http://mysite.de/xy/delete';}">
    Click to delete
</a>

这至少可以防止链接在没有JavaScript的情况下起作用。这还可以减少链接意外被Google或某些本地插件爬行的风险。(假设您有一个插件，会尝试在悬停链接时加载/显示缩略图)！)

然而，这个解决方案并不理想。您实际上将浏览到该网址，并且由于此原因，该网址可能会在历史记录中显示出来。您甚至可能会误删除Bob，然后通过单击浏览器中的“后退”意外删除该Bob！

更好的选择是使用JavaScript或表单来发布所需操作。您可以使用POST方法或更好的DELETE方法向服务器发出请求。这样应该也可以防止URL被索引。

- GolezTrol

---

同意，这样会好一些。例如，页面出现在浏览器历史记录中可能存在潜在风险。 - cspolton

我正在使用PHP打印链接，不知道为什么这不起作用：echo '<a class="garbage" href="#" onclick="if(confirm("确定？")){ window.location="" rel = "nofollow noreferrer">http://www.web.de";}">'; - DarkLeafyGreen

您需要转义“Sure？”和“web.de”周围的引号。 - cspolton

或者使用单引号，就像我在我的答案中所做的那样。 - GolezTrol

Answer 3

考虑一下如果用户禁用了JavaScript，或者Google爬取了该链接会发生什么。你的实体会被删除吗？

更好的方法是发布一个表单来删除。

- cspolton

---

我认为这个删除链接不是公开的，所以应该没有问题。 - jwueller

我需要一个后端服务的功能，其中必须启用JavaScript。 - DarkLeafyGreen

这假设没有其他安全措施...虽然我同意应该使用POST来执行操作。 - Nick Craver

从问题中并不清楚这个功能是否将公开访问。 - cspolton

使删除操作对公众可访问是非常罕见的决定。显然，应该防止授予搜索引擎蜘蛛访问此类页面的权限。 - jwueller

Answer 4

有一个jQuery插件可以做到这一点：jquery.confirm。

例子：

<a href="home" class="confirm">Go to home</a>

JS代码：

$('.confirm').confirm();

如果用户确认，他将被重定向到的链接，否则不会发生任何事情。

- Matthieu Napoli

Answer 5

你可以使用以下代码： 从[1]下载bootboxjs：http://bootboxjs.com/ 创建按钮（HTML）

<button type="submit" id="btn">Delete</button>

调用对话框：

  var myBtn = document.getElementById('btn');


  myBtn.addEventListener('click', function(event) {
      bootbox.confirm({
          size: "small",
          message: "Are you sure?",
          callback: function (result) {
              /* result is a boolean; true = OK, false = Cancel*/
              if (result == true) {
                  alert("ok pressed");
              }
              else {
                  alert("cancel pressed");
              }
          }
      })
  });

- Luisitox