Question

我的表单验证在服务器端完成，因此只有在用户提交表单时才会触发。我希望显示一个模式弹出窗口，汇总用户刚刚输入的数据，并为他们提供继续或取消的选项。截至目前，模态显示一秒钟然后继续保存而无需等待用户确认。如何保持表单提交直到用户决定这样做？

形式：

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

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

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

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

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

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

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

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

JS：

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 && State && Name && address && 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")
                }
            }
        });
    }
};

Answer 1

将 AddNew 按钮的类型从提交更改为按钮，并将以下行添加到添加此帐户按钮的回调函数来手动提交表单：

document.getElementById("Add").submit();

Answer 2

您可以使用 event.preventDefault（）来限制按钮提交调用

{{1}}

在模态popoup之后阻止立即提交

2 个答案: