在js中覆盖MVC表单提交，然后覆盖它

Question

我有一个视图，上面有一个删除按钮，可以在 table:

的每一行中创建一个表单

<td>
@using (Html.BeginForm("Delete", "FP/WorkItem",
            new { fId = Model.FPId, workId = @w.FId })) {
        <input name="deleteWorkItem" type="submit" value="Delete" class="btn btn-default" onclick="return confirm('Are you sure?');" />
    }
</td>

一切都很好，但我不想要糟糕的警报对话框。我想使用像 bootbox 这样的好东西。所以我修改它以删除按钮上的 onclick 并添加一些 JavaScript:

$("input[name='deleteWorkItem']").click(function (e) {
    //return confirm('Delete selected item?');
    e.preventDefault();
    bootbox.confirm("Delete selected item?", function (result) {
        return result;
    });
});

没有 preventDefault 确认框永远不会出现。使用 preventDefault 如果用户决定不删除，表单不会 post 返回。

我怎样才能两者兼得？

Answer 1

保留e.preventDefault()并在确认函数回调中手动触发表单提交：

bootbox.confirm("Delete selected item?", function (result) {
    $(this).closest("form").submit()
    return result;
}.bind(this));

Answer 2

您必须防止默认表单而不是按钮。看一个例子：

 $("form").on("submit", function (e) {
        e.preventDefault(); //prevent default form submit

        //do the work here
    });


$("#buttonToSubmit).on("click", function(){
     //Line used to force submit the form
     $("form").off("submit").submit();
});

在js中覆盖MVC表单提交，然后覆盖它

Override MVC form submit in js, but then override that

javascript

dom

jquery-events