unobtrusive ajax form prevent cancel button from posting

Question

Question: Why is cancel button posting to the controller like submit?

I have the form below loaded from a partial view. Submit works fine. The only thing I've been struggling with is why Cancel doesn't just dismiss the form. I've tried a variety of things like capturing the click event. I looked at http://jimmylarkin.net/post/2012/05/16/Broken-Validation-on-Cancel-Buttons-With-Unobtrusive-Validation-Ajax.aspx as a possible solution but I'm not sure this is the problem it's intended to address. No doubt it's some ignorance on my part. So what bonehead thing am I missing?

//click event loading the form. 
<script>
    $(document).ready(function () {
        $('#editbtn').click(function () {
            var url = "/Quiz/EditQuiz?id=@id";
            $.get(url, function (data) {
                $('#formdiv').html(data);
                $("#formdiv").show();
            });
        });  
</script>

//form inside partial view. 
    @using (Ajax.BeginForm("EditQuiz", "Quiz", FormMethod.Post,
                        new AjaxOptions
                        {
                            InsertionMode = InsertionMode.Replace,
                            HttpMethod = "POST",
                            UpdateTargetId = "formdiv"
                        }))
{
        @Html.ValidationSummary(true)
        @Html.AntiForgeryToken()
        <div>
            <fieldset>
            .
            .              
            <input type="submit"  class = "btn btn-primary" value="Save" />
            <button  class = "cancel" >Cancel </button>
            </fieldset>
        </div>
  }

Answer 1

I'm curious if your cancel button is whats causing the submit by default. Try replacing your <button class="cancel"> with an Html helper. How about @Html.ActionLink("Cancel", "Index"). This is a link that has text Cancel and redirects to action Index.