How can I show a dialog before submitting?

Question

I've got a form with a submit button, and I want to show a dialog before continuing the form submission.

The code below is showing the dialog properly, but it continues the submit anyway:

@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

You need to add e.preventDefault(); inside the JQuery click event to prevent submitting.

<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>