Question

我有一个基本表格。当用户提交表单时，我想要显示一个jQuery对话框，询问用户是否确定要继续。

这就是我所拥有的：

<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog-confirm").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "Continue": function () {
                    // continue and post data to action method
                },
                "Cancel": function () {
                    // close dialog and do nothing
                }
            }
        });
    }); 
</script>

@using (Html.BeginForm("Index", "Members", FormMethod.Get))
{
    Name: @Html.TextBox("searchName")
    <input value="Submit" type="submit" />
}

但我不知道如何将对话框挂钩到表单提交中。有谁知道怎么做？

Answer 1

你可以这样做：

$('form#yourFormId').submit(function(e){
   e.preventDefault();
   $('#dialog-confirm').dialog('open');
});
$("#dialog-confirm").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
           "Continue": function () {
                $(this).dialog('close');
                $("form#yourFormId").submit();
           },
           "Cancel": function () {
           // close dialog and do nothing
          }
    }
});

Answer 2

可以通过向提交按钮添加单击处理程序来阻止表单提交但打开对话框。然后在Continue按钮回调

中提交表单

<-- adding ID to button-->
<input id="mySubmitButton" value="Submit" type="submit" />

JS

$("#dialog-confirm").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Continue": function () {
                // am not familiar with parsing dotNet form helper, assume "Members" is form ID
               $('form#Members').submit()/* or use AJAX*/

            },
            "Cancel": function () {
               $(this).dialog('close')
            }
        }
    });

$('#mySubmitButton').click(function(e){
   e.preventDefault()
   $("#dialog-confirm").dialog('open')
})

Answer 3

如果我有一个提交按钮，但我想在发布表单之前做一些客户端脚本我在html中执行此操作：

<input id="mySubmitButton" value="Submit" type="submit" onclick="return MyFunction();"/>

在JS中我是这样做的：

function MyFunction()
{//any code you wanted to run here
   return true;
}

您需要更改MyFunction以提示用户，如果他们取消了操作，则返回false。

这种使用布尔返回值调用javascript函数的方法很方便，尤其是当您需要在帖子之前执行输入验证时。

Answer 4

如果要关闭对话框并避免页面提交数据，则需要输入：

return false;

在对话框的继续功能中使用重定向。您不需要具有功能，它将始终有效。我在像你这样的对话框中将这个方法用于我的asp.net网站。

<script type="text/javascript">
$(document).ready(function () {
    $("#dialog-confirm").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Continue": function () {
                // continue and post data to action method
                // Redirect to a page 
            },
            "Cancel": function () {
                // close dialog and do nothing
                return false;
            }
        }
    });
}); 
</script>

@using (Html.BeginForm("Index", "Members", FormMethod.Get))
{
    Name: @Html.TextBox("searchName")
    <input value="Submit" type="submit" />
}

在将表单发布到操作方法之前显示jQuery对话框

4 个答案: