在取消按钮上确认对话框发布？答案

【问题标题】：Confirm dialog posting on Cancel button?在取消按钮上确认对话框发布？
【发布时间】：2017-10-09 07:17:32
【问题描述】：

我正在使用以下<a> 标记来显示一个简单的确认它的作用。但是，当我单击取消按钮时，它仍然执行 post 方法。据我了解，如果单击“取消”按钮，确认前面的return 应该会导致表单无法发布。

<a href="#" 
   data-potr-action="delete"
   data-potr-val="@item.RID"
   onclick="return confirm('Are you sure you want to delete this Request?');"
   class="btn btn-default btn-sm">
    <i class="glyphicon glyphicon-trash"></i> Delete
</a>

我在页面末尾有这段代码，但我认为它与问题无关。我没想到在确认对话框中选择取消时它会触发点击事件。

这只是获取 data-action 和 data-value 中的值并将它们存储到隐藏字段中。这是在不应该到达的点击时完成的。

@section scripts {
    <script>
    $(document).ready(function () {
      // Hook events on buttons and anchors
      buildClickEvents();
    });

    // Hook events on buttons and anchors
    function buildClickEvents() {
      $("[data-potr-action]").on("click", function (e) {
        e.preventDefault();

        $("#EventCommand").val(
            $(this).data("potr-action"));

        $("#EventArgument").val(
            $(this).attr("data-potr-val"));

        $("form").submit();
      });
    }
    </script>
}

【问题讨论】：

标签： javascript asp.net-mvc

【解决方案1】：

  $("[data-potr-action]").on("click", function (e) {
    if(confirm("your message")){
        $("#EventCommand").val(
            $(this).data("potr-action"));

        $("#EventArgument").val(
            $(this).attr("data-potr-val"));

        $("form").submit();
    }

    e.preventDefault();


  });

【讨论】：

正要发布相同的内容。还要确保从 HTML 标记中删除 onclick 属性
如果我的表单中只有一个删除按钮，但在这种情况下，我有一个过滤器按钮和一个删除按钮。这就是为什么存在数据行动价值的原因。在提交时，该值被设置为隐藏值，然后传递给 Post 方法。在 post 方法中我使用 switch 语句来查看值。如果它是“过滤器”，它会做一件事，如果它是“删除”，它会做另一件事。我是根据 Paul Sheriff 的博客来做的。

【解决方案2】：

要回答您的问题，不确认不会阻止表单发布。如果按下“确定”，则返回 true；如果按下“取消”按钮，则返回 false。请参阅W3c

你可以如下：

function buildClickEvents() {
  $("[data-potr-action]").on("click", function (e) {
    e.preventDefault();
    var result = confirm('Are you sure you want to delete this Request?');
    if(result == false){
       return;
    }
    $("#EventCommand").val(
        $(this).data("potr-action"));

    $("#EventArgument").val(
        $(this).attr("data-potr-val"));

    $("form").submit();
  });
}

并从标签中删除以下内容：

onclick="return confirm('Are you sure you want to delete this Request?');"

【讨论】：