jquery - 确认暂停表单提交，直到确定被推送

Question

我有一个弹出确认对话框的表单（你想继续吗）现在它弹出但表单同时被发送到我的控制器，无论你点击是或否，它都会开始处理。如何在显示/选择 javascript 确认之前暂停表单提交。

 @using (Html.BeginForm("Process", "Home", FormMethod.Post, 
 new { id ="MyForm" })) {  
    @Html.TextBoxFor(m => m.Name); 
    // other form controls...
    <input id="Submit" type="submit" value="Apply Changes" /> 
 }

javascript: (使用 jquery-ui)

 $(function () {
        $("#Confirm").dialog({
            autoOpen: false,
            buttons: {
                "Ok": function() {
                    $(this).dialog("close");
                    $('#MyForm').submit();
                    return true;
                },
                Cancel: function() {
                    $(this).dialog("close");
                    event.preventDefault();
                    return false;
                }
            }
        });

        $("#Submit").click(function () {
            $("#Confirm").dialog("open");
        });
    });

Answer 1

立即阻止默认操作，然后在按下确定按钮时触发提交。

 $(function () {
    $("#Confirm").dialog({
        autoOpen: false,
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
                $('#MyForm')[0].submit();
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });

    $("#MyForm").submit(function (e) {
        e.preventDefault();
        $("#Confirm").dialog("open");
    });
});

Answer 2

将submit按钮移出表单并将其更改为常规<input type="button"/>.

您的模态“确定”功能会为您完成提交，因此您不需要表单中的提交按钮。

@using (Html.BeginForm("Process", "Home", FormMethod.Post, 
 new { id ="MyForm" })) {  
    @Html.TextBoxFor(m => m.Name); 
    // other form controls...

 }
<input id="Submit" type="button" value="Apply Changes" /> 

Answer 3

您还可以使用表单本身的“onsubmit”事件并返回true或者false如果您希望它实际提交数据或不返回。