Question

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

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

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

我试过了：

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

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

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

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

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>

Answer 2

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

根据我的问题，解决方案如下所示：

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

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>

Answer 4

我的解决方案

@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;
    }
}

Answer 5

您可以通过使用.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”参数未定义，并且会显示启动对话框。如果用户在对话框中确认操作，则使用附加参数再次触发Submit事件，并且表单将正常提交。

使用bootbox.confirm（）确认表单提交

5 个答案: