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

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

你需要添加e.preventDefault(); 在JQuery click事件中,以防止提交.

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