jquery ajax form collection and other key/value pairs

Question

well since I never got an answer to my question here: checkboxes and radio buttons in MVC FormCollection

I thought I'd take a different approach and just find my radio button value client side, and pass it as a different name/value pair in my ajax call...it was a great idea, but I can't get it to work.

using this works fine to pass my form collection:

formCollection = $(':input');
        $.ajax({
            type: "POST",
            url: "/mycontroller/mymethod",
            data: formCollection,
            dataType: "text",
            success: showConfirm,
            error: function (xhr, textStatus, errorThrown) {
                alert(xhr.responseText);
            }
        });

but when I try and change my data to an object like this:

formCollection = $(':input');
        $.ajax({
            type: "POST",
            url: "/mycontroller/mymethod",
            data: ({collection: formCollection}),
            dataType: "text",
            success: showConfirm,
            error: function (xhr, textStatus, errorThrown) {
                alert(xhr.responseText);
            }
        });

it won't fly. I need to do that so ultimately I can use this:

formCollection = $(':input');
        $.ajax({
            type: "POST",
            url: "/mycontroller/mymethod",
            data: ({collection: formCollection, radiobutton: radiobuttonValue}),
            dataType: "text",
            success: showConfirm,
            error: function (xhr, textStatus, errorThrown) {
                alert(xhr.responseText);
            }
        });

my action method on the controller looks like this:

[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult mymethod(FormCollection collection)
        {
}

any ideas why when I change the data, it doesn't work?

what does FormCollection actually contain? -- see also api.jquery.com/jQuery.ajax/#sending-data-to-server — Blazemonger
– Blazemonger, Commented Sep 13, 2011 at 14:46
formCollection = $(':input'); it contains all of the input fields on the page... — Christopher Johnson
– Christopher Johnson, Commented Sep 13, 2011 at 14:52
So you're trying to submit a jQuery object, instead of data? Try using formCollection = $('form').serialize() instead. api.jquery.com/serialize — Blazemonger
– Blazemonger, Commented Sep 13, 2011 at 14:57
ok serializing the formCollection did the trick. Note to others though, it still can't be passed like data: ({ whatever: whatever })...it has to be passed like data: whatever.serialize(). If you make a "real" answer out of this mblase, I'll mark it as the answer. — Christopher Johnson
– Christopher Johnson, Commented Sep 13, 2011 at 15:11

Blazemonger · Accepted Answer · 2011-09-13 15:36:24Z

2

Try using formCollection = $('form').serialize() instead.

http://api.jquery.com/serialize

This will produce a string that looks like a GET query string, which you can use directly in your first code sample.

edited Sep 13, 2011 at 15:36

answered Sep 13, 2011 at 15:23

Blazemonger

93.4k28 gold badges147 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mooglife · Accepted Answer · 2011-09-13 15:10:13Z

0

//first try and get the value of the field , that resolve the issue formCollection = $(':input').val();

edited Sep 13, 2011 at 15:10

answered Sep 13, 2011 at 15:03

mooglife

2261 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

jquery ajax form collection and other key/value pairs

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related