使用bootbox.confirm()确认表单提交

Question

我有一个表单，希望截取表单提交事件并使用 bootbox 显示确认对话框。

1. 用户输入一些数据
2. 用户点击提交按钮
3. 确认对话框被显示

如果用户点击 OK，则表单应该提交，否则它应该停留在当前页面。

我尝试过这个：

$('#myForm').submit(function() {
    return bootbox.confirm("Are you sure?");
});

然而，bootbox.confirm() 会立即返回，确认对话框会再次隐藏。

我注意到在 bootbox.confirm() 中有一个回调参数。但是，如果我从回调函数中调用 $('#myForm').submit()，这显然只会再次显示确认对话框。

那么，正确的确认表单提交的方法是什么？

- theDmi

---

顺便说一下，将提交按钮更改为普通按钮并在那里附加脚本并不是解决办法，因为用户仍然可以通过按下回车键来触发表单提交。 - theDmi

Answer 1

我只能通过阻止默认表单行为来使之工作，以下是解决方案。我将其用于一组表单中，每个表单都有一个提交删除按钮，它可以正常工作。

<script type="text/javascript">
    $('form').submit(function(e) {
        var currentForm = this;
        e.preventDefault();
        bootbox.confirm("Are you sure?", function(result) {
            if (result) {
                currentForm.submit();
            }
        });
    });
</script>

- Nuno Reis

---

对我有用，如果不使用currentForm，它会陷入无限循环，感谢你的帮助！ - trueinViso

你不是在调用 submit 并且没有在 bootbox 周围加上检查吗？那么这不会再次显示确认对话框吗？ - Mubashar Abbas

Answer 2

一如既往地：在你提出问题之后，你会发现自己已经找到了答案 :-). 看看这个答案：https://dev59.com/mUzSa4cB1Zd3GeqPnH0u#2420806 （还要注意答案中的评论）。

根据我的问题进行调整，解决方案如下：

$('#myForm').submit(function() {
    var currentForm = this;
    bootbox.confirm("Are you sure?", function(result) {
        if (result) {
            currentForm.submit();
        }
    });
});

- theDmi

---

那么调用 currentForm.submit(); 就不会执行 jQuery 代码 $('#myForm').submit(function() {... 吗？ - ScottC

不，好像不是。但我不够了解JS，无法告诉你为什么 :-)。 - theDmi

$('#myForm').submit(function(e) { e.preventDefault(); ... had to add preventDefault $('#myForm').submit(function(e) { e.preventDefault(); …必须添加preventDefault。这段代码的意思是，在表单提交时防止默认行为的发生。 - Rahul

这将在没有确认的情况下提交您的表单。您需要使用preventDefault()来防止此操作。 - alias51

Answer 3

这段代码对我来说完美运行...

<script type="text/javascript">
$('#myForm').click(function(e) {
    e.preventDefault();
    var msg = 'Souhaitez vous vraiment supprimer ce produit ?';
    bootbox.confirm(msg, function(result) {
        if (result) {
            $('#myForm').submit();
        }
    });
});
</script>

- Amine Minou

Answer 4

你可以通过使用.trigger()方法向提交处理程序传递附加参数来解决这个问题:

$('form').submit(function (e, confirmed) {
    var currentForm = $(e.currentTarget);
    if (!confirmed) {
        e.preventDefault();
        bootbox.confirm("Are you sure?", function (result) {
            if (result) {
                currentForm.trigger('submit', { confirmed: true });
            }
        });
    }
});

当表单首次被提交时，“confirmed”参数未定义，bootbox对话框将显示。如果用户在对话框中确认操作，则再次触发提交事件并附加参数，表单将正常提交。

- Toni Kuosmanen

Answer 5

我的解决方案

@Html.ActionLink("Delete", "DeleteReport", new { id = item.Id }, new { @class = "btn btn-danger", onclick = String.Format("return ASE.ConfirmAction(this.href, 'Delete {0}?');", item.Name) })

var ASE = {
    ConfirmAction: function (href, text) {
        bootbox.confirm(text, function (result) {
            if (result)
                window.location = href;
        });

        return false;
    }
}

- Alexandr Sulimov

---

window.location 执行的是重定向而不是表单提交。 - Almalerik