JQuery Form Post not sending FormCollection to MVC Controller

Question

Hi All, I'm attempting to change the data in PartialView within my view via a dropdownlist change in the form. Now if I hit the submit button my form posts no problem and the formcollection is available, however when I try to submit via jquery on a change event the form submits alright but no formcollection

Any ideas?

This is the submission code

$(function() {
            $('#ddlSelection').change(function() {
                var form = $("#myForm");
                var action = form.attr("action");
                var serializedForm = form.serialize();
                $.post(action, serializedForm, function() { alert("Finished!") });
            });
        });

the form is as such

    <% using (Ajax.BeginForm("myForm", new AjaxOptions
            {
                UpdateTargetId = "divItemsList",
                OnComplete = "ClearForm"
            }))
       {%>


        <%=Html.Label("ddlFilter", "Parent Filter")%>
        <%=Html.DropDownList("ddlFilter", "Please Select ...")%><br />



        <fieldset>
            <legend>Filter Option Details</legend>
            <p>
                <label for="Value">Value:</label>
                <%= Html.TextBox("Value") %>
                <%= Html.ValidationMessage("Value", "*") %>
            </p>
        </fieldset>
<%}%>

SOLUTION Ok, should have been paying more attention, the Ajax.Beginform tag does not give the form an id or name, I assume they regard it as uneccessary so the solution is to add the htmlattributes manually. as so ..

<% using (Ajax.BeginForm("TheAction", null, new AjaxOptions
            {
                UpdateTargetId = "divFilterItemsList",
                OnComplete = "ClearForm"
            }, new { ID = "myForm", Name = "myForm" }))
       {%>

Answer 1

The jQuery documentation says

In order to work properly serialize requires that form fields have a name attribute. Having only an id will not work

I would check to ensure that all your form elements have a name attribute.

Answer 2

I've seen form.serialize act up if you have things like nested forms (which should be avoided). You could always try:

var serializedForm = $("#myForm input, #myForm select, #myForm textarea").serialize();

To see if it's the form serialization that's the issue or the actual post.

And to be paranoid, your form has an ID of "myForm" when you look at the HTML source not just a name of that right?

Edit after ASP code was posted: Why not change your JS to:

$(function() {
    $('#ddlSelection').change(function() {
        $("#myForm").submit();
    });
});

I didn't realize you already were using the ajax form from .net. Should be able to just trigger the normal submit for the form and have it work ok.