如何在提交前显示对话框？

Question

我有一个带有提交按钮的表单，我想在继续提交表单之前显示一个对话框。

下面的代码正确显示了对话框，但它仍然继续提交：

@using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post, new { id = "form" }))
{
    @Html.AntiForgeryToken()
    *snip*

    <div class="collapseClosed panel-footer panel-collapse collapse in">
        <input type="submit" name="btnSubmit" id="btnSubmit" class="btn btn-success" value="Submit" />
    </div>
}
<div id="confirm" title="Confirm">
    <span id="confirmtext"></span>
</div>

<script>
    $("#btnSubmit").on("click", function () {
        currentForm = $(this).closest('form');
        $("#confirmtext").text("Please confirm.");
        $("#confirm").dialog('open');
    });
</script>

Answer 1

需要在JQuery点击事件中添加e.preventDefault();防止提交。

<script>
    $("#btnSubmit").on("click", function (e) {
        e.preventDefault();
        currentForm = $(this).closest('form');
        $("#confirmtext").text("Please confirm.");
        $("#confirm").dialog('open');
    });
</script>

Answer 2

<script>
    $("#btnSubmit").on("click", function (e) {
        e.preventDefault();
        currentForm = $(this).closest('form');
        $("#confirmtext").text(Please confirm.");
        $("#confirm").dialog('open');
    });
</script>