jQuery Dialog-Taste innerhalb des Formulars verursacht POST

Question

Ich versuche, einen modalen Dialog in einem Formular zu platzieren, um beim Ausfüllen der Felder zu helfen. Wenn ich den Knopf außerhalb des Formulars platziere, funktioniert es wie erwartet. Wenn ich den Button innerhalb des Formulars platziere, wird das Formular nach dem Anklicken gepostet.

Click-Ereignis

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

Funktionelle

<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" />  
} 

Beiträge Form

<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" />  
} 

Dies ist eine Abk generische Version eines längeren Formulars. In der Praxis soll sich der Knopf in der Mitte der Form zwischen Gruppen von Feldern befinden. Ist es möglich, den Button innerhalb des Formulars zu platzieren, ohne dass das Formular gepostet wird?

Answer 1

Fügen Sie return false; am Ende Ihres click Handlers hinzu.

Answer 2

Try this:

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