CODEWITHSUNDEEP
jqueryasp.net-mvc-3dialogmodal-dialog
user1013571
user1013571

Reputation: 125

jQuery Dialog button within form causes POST

I'm trying to place a modal dialog within a form to aid in filling in the fields. If I place the button outside of the form, it works as expected. If I place the button inside the form, the form gets posted once it's clicked.

Click event

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

Functional

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

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

This is an abbreviated generic version of a lengthy form. In practice the button is intended to be in the middle of the form between sets of fields. Is it possible to place the button within the form without it causing the form to post?

Upvotes: 1

Views: 1221

Answers (2)

bobek
bobek

Reputation: 8022

Try this:

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

Upvotes: 4

SLaks
SLaks

Reputation: 887285

Add return false; to the end of your click handler.

Upvotes: 3

Related Questions