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

【问题标题】：Confirm form submission using bootbox.confirm()使用 bootbox.confirm() 确认表单提交
【发布时间】：2012-07-03 14:53:56
【问题描述】：

我有一个表单并想拦截表单提交以显示使用bootbox 的确认对话框。

用户输入了一些数据
用户点击提交
显示确认对话框

如果用户点击OK，那么表单应该提交，否则它应该留在页面上。

我试过了：

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

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

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

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

【问题讨论】：

顺便说一句，将提交按钮改为普通按钮并附加脚本没有解决方案，因为用户仍然可以通过按回车触发表单提交。

标签： jquery twitter-bootstrap

【解决方案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>

【讨论】：

为我工作，不使用 currentForm 它卡在无限循环中，感谢您的帮助！
不会再次显示确认对话框，因为您正在调用submit 并且没有检查bootbox？

【解决方案2】：

与往常一样：在您提出问题后，您自己会找到答案 :-) 。请参阅此答案：https://stackoverflow.com/a/2420806/219187（另请注意答案中的评论）。

适应了我的问题，解决方法如下：

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

【讨论】：

所以调用currentForm.submit(); 不会执行jQuery 代码$('#myForm').submit(function() {... ??
不，似乎没有。但是我还不够 JS 专业人士来告诉你为什么:-)。
$('#myForm').submit(function(e) { e.preventDefault(); ... 必须添加 preventDefault
这将在没有确认的情况下提交您的表单。你需要 preventDefault()

【解决方案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>

【讨论】：

【解决方案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' 参数未定义并显示引导框对话框。如果用户确认对话框中的操作，则使用附加参数再次触发提交事件，并正常提交表单。

【讨论】：

【解决方案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;
    }
}

【讨论】：

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