preventing immediate submission after modal popoup
<p>validation for my form is done on the server-side so it only fires when the user submits the form. I wish to display a modal popup summarizing the data the user just entered and give them the option to continue or cancel. As of right now, the modal displays for a second and then it goes on to save without waiting for user confirmation. How can i keep the form from submitting until the user decides to do so?</p>

<p>form:</p>

<pre><code>    &lt;div id="Display" class="fieldset"&gt;
                @using (Html.BeginForm("AddAccount", "RxCard", FormMethod.Post, new { id = "Add", enctype = "multipart/form-data" }))
                {

                    &lt;fieldset&gt;
                        &lt;div class="form"&gt;
                            &lt;label id="lblAccountName"&gt;Account Name&lt;/label&gt;
                            @Html.ValidationMessageFor(model =&gt; model.Pharmacy.AccountName, null, new { @class = "validationmessage" })
                            @Html.TextBoxFor(model =&gt; model.Pharmacy.AccountName )

                            &lt;label style="margin: 5px" id="lblAddress"&gt;Address&lt;/label&gt;
                            @Html.ValidationMessageFor(model =&gt; model.Pharmacy.Address, null, new { @class = "validationmessage" })
                            @Html.TextBoxFor(model =&gt; model.Pharmacy.Address)

                            &lt;label style="margin: 5px" id="lblCity"&gt;City&lt;/label&gt;
                            @Html.ValidationMessageFor(model =&gt; model.Pharmacy.City, null, new { @class = "validationmessage" })
                            @Html.TextBoxFor(model =&gt; model.Pharmacy.City)

                            &lt;label style="margin: 5px" id="lblState"&gt;State&lt;/label&gt;
                            @Html.ValidationMessageFor(model =&gt; model.Pharmacy.State, null, new { @class = "validationmessage" })
                            @Html.TextBoxFor(model =&gt; model.Pharmacy.State)

                            &lt;label style="margin: 5px" id="lblZip"&gt;Zip&lt;/label&gt;
                            @Html.ValidationMessageFor(model =&gt; model.Pharmacy.ZipCode, null, new { @class = "validationmessage" })
                            @Html.TextBoxFor(model =&gt; model.Pharmacy.ZipCode)

                            &lt;label style="margin: 5px" id="lblPhoneNumber"&gt;Phone Number (optional)&lt;/label&gt;
                            @Html.ValidationMessageFor(model =&gt; model.Pharmacy.PhoneNumber)
                            @Html.TextBoxFor(model =&gt; model.Pharmacy.Area, new {  @onkeyup = "tabout(this,'Pharmacy_Prefix');", @maxlength = "3", @style = "float:left; width:5em" })
                            @Html.TextBoxFor(model =&gt; model.Pharmacy.Prefix, new { @onkeyup = "tabout(this,'Pharmacy_Suffix');", @maxlength = "3", @style = "float:left; width:5em" })
                            @Html.TextBoxFor(model =&gt; model.Pharmacy.Suffix, new { @maxlength = "4", @style = "float:left; width:5em" })

                            &lt;input type="hidden" id="IgnoreDuplicate" name="IgnoreDuplicate" /&gt; 
                        &lt;/div&gt;
                        &lt;br/&gt;
                    &lt;/fieldset&gt;
                    &lt;button type="submit" value="Save" name="AddNew" id="AddNew" data-toggle="modal"&gt;Save&lt;/button&gt;
                    &lt;button type="submit" value="Cancel"&gt;Cancel&lt;/button&gt; 
                }               
            &lt;/div&gt;   
        &lt;/section&gt;
       //modal
        &lt;div id="dialog-modal" class="dialog-modal-style"&gt;
            &lt;div&gt;
                confirm details
            &lt;/div&gt;
            &lt;div&gt;
            Are you sure you want to submit the following account?
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;th&gt;Account Name&lt;/th&gt;
                    &lt;td id="Name"&gt;&lt;/td&gt;
                &lt;/tr&gt; 
                &lt;tr&gt;
                    &lt;th&gt;Address&lt;/th&gt;
                    &lt;td id="Address"&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;th&gt;City&lt;/th&gt;
                    &lt;td id="City"&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;th&gt;State&lt;/th&gt;
                    &lt;td id="State"&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;th&gt;Zip Code&lt;/th&gt;
                    &lt;td id="Zip"&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code>document.getElementById("AddNew").onclick = function OpenDialog() {

    var address = $("#Pharmacy_Address").val();
    var Name = $("#Pharmacy_AccountName").val();
    var City = $("#Pharmacy_City").val();
    var State = $("#Pharmacy_State").val();
    var Zip = $("#Pharmacy_ZipCode")
    $("#City").text($('#Pharmacy_City').val());
    $("#State").text($('#Pharmacy_State').val());
    $("#Name").text($('#Pharmacy_AccountName').val());
    $("#Address").text($('#Pharmacy_Address').val());
    $("#Zip").text($('#Pharmacy_ZipCode').val());

    if (Zip &amp;&amp; State &amp;&amp; Name &amp;&amp; address &amp;&amp; City != "") {
        $("#dialog-modal").dialog({         
            height: 300,
            width: 300,
            draggable: true,
            modal: true,
            dialogClass: 'dialog-modal-style',
            buttons: {
                "Add this account": function () {
                    $(this).dialog("close")
                },
                "Cancel": function () {
                    $(this).dialog("close")
                }
            }
        });
    }
};
</code></pre>