jQuery post() with serialize and array of data

Question

i am unable to get collection value during post in mvc 3. it is returning null.

$.post("/Work/Post", { vm: $('#myForm').serializeArray(), 'collection': ['a', 'b', 'c'] });

//Or


var data = $('#myForm').serializeArray();
data.push({ name: 'collection', value: ['a', 'b', 'c'] });
$.post("/Work/Post", data);

//Or

var data = $('#myForm').serializeArray();
data.push({ name: 'collection[]', value: ['a', 'b', 'c'] });
$.post("/Work/Post", data);

Try using .ajax directly rather than .post and see if you get something — mgaughan
– mgaughan, Commented Aug 8, 2012 at 15:34
Use Firebug, or a similar tool, to see what data is being sent as part of the request, and check that it matches the format you're expecting/needing it to be on the server. — Anthony Grist
– Anthony Grist, Commented Aug 8, 2012 at 15:36

MattW · Accepted Answer · 2012-08-08 15:48:08Z

8

I had a similar problem when passing arrays.

Instead of using $.post use $.ajax and set the traditional option = true ...

$.ajax({
    type: "POST",
    url: "Work/",
    traditional: true,
    data: { collection: ['a','b','c'] }
});

The traditional: true option is important

answered Aug 8, 2012 at 15:48

MattW

13.2k5 gold badges42 silver badges65 bronze badges

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

Comments

Thulasiram · Accepted Answer · 2012-08-09 07:36:48Z

4

                var model = $('#myForm').serializeArray();

                $.map(['a', 'b', 'c'], function (val, i) {
                    return model.push({ "name": "collection[" + i + "]", "value": val });
                });

                $.post("/Work/Post", model);
                //OR
                $.post("/Work/Post", model, function (data) {
                    //After Success
                });

answered Aug 9, 2012 at 7:36

Thulasiram

8,5628 gold badges48 silver badges54 bronze badges

1 Comment

user1021364 Over a year ago

More people should know the name value pair usage of jquery ajax data model.

Faust · Accepted Answer · 2012-08-08 15:48:33Z

3

I banged my head against this wall for months with the regular .ajax() call.

I eventually found out that you need to set traditional: true in the params list for $.ajax(). (see the "traditional" heading here: http://api.jquery.com/jQuery.ajax/)

Since there is no params list for $.post(), I'm not sure you can do this with $.post(). But it's not much more code to use $.ajax().

answered Aug 8, 2012 at 15:48

Faust

15.5k10 gold badges58 silver badges116 bronze badges

Comments

Uresh K · Accepted Answer · 2017-01-19 15:26:30Z

-1

The following worked for me. You can use ~~serializeArray()~~ serializeJSON() as below and set that to the data element. Observe the formData variable.

var formData = $('#inputForm').serializeJSON();
$.ajax({
    type : "POST",
    url: server_side_url,
    cache:false,
    traditional: true,
    data: formData,
    dataType: "json",
    success: function(data, textStatus, jqXHR){
        console.log("successfully processed.");
    },
    error: function(xhr,status,error){
        console.log("error occurred.");
    }
});

edited Jan 19, 2017 at 15:26

answered Apr 17, 2014 at 18:54

Uresh K

1,13611 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery post() with serialize and array of data

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related