1

我有一个基本形式。当用户提交表单时，我希望显示一个 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" />
}

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

4

4 回答 4

5

你可以这样做：

$('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
          }
    }
});
于 2013-03-11T04:04:25.133 回答
0

可以通过向提交按钮添加一个单击处理程序来阻止表单提交但打开对话框来做到这一点。然后在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')
})
于 2013-03-11T04:06:03.477 回答
0

如果我有一个提交按钮，但我想在表单发布之前执行一些客户端脚本，我会在 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 函数的方法很方便，特别是当您需要在发布之前执行输入验证时。

于 2013-03-11T04:31:49.843 回答
0

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

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" />
}
于 2013-03-11T14:19:06.090 回答