Question

我正在尝试在表单中放置一个模态对话框以帮助填写字段。如果我将按钮放在表单之外，它将按预期工作。如果我将按钮放在表单中，表单会在单击后发布。

点击活动

$("#openList").button().click(function () {
    $("#list").dialog("open");
});

功能

<div id="list" title="Select one">
    @{ Html.RenderPartial("Index/_ListDialog"); }
</div>
<p>
    <button id="openList">Open List</button>
</p>

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{    
    <div id="ChildFields">
        @{ Html.RenderPartial("Index/_Fields"); }
    </div>
    @Html.HiddenFor(model => model.otherData) 

    <input type="submit" value="Submit" />    
}

帖子

<div id="list" title="Select one">
    @{ Html.RenderPartial("Index/_ListDialog"); }
</div>

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{    
    <p>
        <button id="openList">Open List</button>
    </p>
    <div id="ChildFields">
        @{ Html.RenderPartial("Index/_Fields"); }
    </div>
    @Html.HiddenFor(model => model.otherData) 

    <input type="submit" value="Submit" />    
}

这是冗长形式的缩写通用版本。实际上，按钮旨在位于字段集之间的表单中间。是否可以将按钮放在表单中而不会导致表单发布？

Answer 1

试试这个：

$("#openList").button().click(function (e) {
    e.preventDefault();
    $("#list").dialog("open");
});

Answer 2

将return false;添加到click处理程序的末尾。

表单中的jQuery对话框按钮会导致POST

2 个答案: