How to add array to form when using jquery submit?

Question

I have a form on a page and the data inputed gets posted to the server. I am right now tying to add an array to the post like so:

$("#createTankForm").submit(function() {
    if ($(this).valid()) {
        var data = $(this).serializeArray();
        var celVerLst = [];
        var formsLst = $(".TankCalVertList").find("#createTankForm .adminRow");
        $(formsLst).each(function (i, v) {
            var celVert = {
                Number: $(this).find("#Number").val(), 
                Border: $(this).find("#Border").val(),
                Volume: $(this).find("#Volume").val(),
                Constant: $(this).find("#Constant").val(),
            }
            celVerLst.push(celVert);
        });
        data.push({
            name: "TankCalVerts",
            value: celVerLst
        });
        data = jQuery.param(data);
        // at this point TankCalVerts is "object[]"
        $.automation.worker.postUserData(this.action, data, function(data) {
            $(".AdmClicked").click();
        });
    } else {
        $(this).addClass("invalidForm");
    }
    return false;
});

As written in the comment above I get

TankCalVerts=%5Bobject+Object%5D%2C%5Bobject+Object%5D

in the post

And in the action method:

How do I do this?

EDIT:

postUserData: function(url, data, callback) {
    //$.LoadingOverlay("show");
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function(data) {
            if (callback) {
                callback(data);
                //$.LoadingOverlay("hide");
            }
        },
    });
}

We don't know what `$.automation.worker.postUserData()` does with that data or what format you expect to receive it in. Show all relevant code — charlietfl, Nov 12 '16 at 13:30
Why not just generate the form controls correctly in the first place (you currently creating elements with duplicate `id` attributes which is invalid html so I assume the `name` attributes are duplicates as well). For existing collection items, use a `for` loop of custom `EditorTemplate` (refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943)) or if your dynamically adding items refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) — , Nov 12 '16 at 23:31
Then the script simply becomes `$("#createTankForm").submit(function() { $.post(yourUrl, $(this).serialize(), function() { ` — , Nov 12 '16 at 23:33

Hafiz Bilal · Answer 1 · 2016-11-12T14:59:35.817

There are 2 Possible Answers
Answer 1 is
You create a json object and read all the data from FORM to that object along with TankCalVerts array like this

data: { id: $("#INPUTID").val(), Lo:$("#LoID").val(), Level:$("#LevelID").val(),../*similerly read all values here..,*/, TankCalVerts: celVerLst }

and POST this data object in $.ajax method.

Answer 2: Change your Code like this
Remove This Portion

 data.push({
    name: "TankCalVerts",
     value: celVerLst
 });

And Replace your Loop $(formsLst).each Like this

var Counter = 0;

$(formsLst)
    .each(function (i, v) {
        data.push({
            name: "TankCalVerts[" + Counter + "].Number",
            value: $(this).find("#Number").val()
        });
        data.push({
            name: "TankCalVerts[" + Counter + "].Border",
            value: $(this).find("#Border").val()
        });
        data.push({
            name: "TankCalVerts[" + Counter + "].Volume",
            value: $(this).find("#Volume").val()
        });
        data.push({
            name: "TankCalVerts[" + Counter + "].Constant",
            value: $(this).find("#Constant").val()
        });
        Counter = Counter + 1;
    });

Which will add the List/Array to your Data accordingly and Let the remaining code as it is. it should post the array/List along with form data.

I have a simmilalr solution already done but I was trying to avoid it since I had alot of parameters here and did not want to write them all. My solution provided me with a way but a good effoer none the less — ThunD3eR, Nov 12 '16 at 15:01
1 Have One more Solution (More like a trick) ;) You convert your subarray into a JSON String and send as single parameter, then Json Decode on server side. — Hafiz Bilal, Nov 12 '16 at 15:05
Thats another way o do it. Although I prefer the answer I showed below — ThunD3eR, Nov 12 '16 at 15:51

score 0 · Accepted Answer · answered Nov 12 '16 at 14:59

After some thinkering and some help from a brilliant friend we came up with this:

                        var objFormData = {};
                        for (var intIndex = 0; intIndex < data.length; intIndex++) {
                            objFormData[data[intIndex].name] = data[intIndex].value;
                        }

We took the serialized data and turned it in to an object which we then posted as a JSON.

I had done a solution where I built my own object but in thise case it would be up to 30 paramaters and i was trying to avoid it and with the simple loop above it solved that issue.

Full answer:

                        var objFormData = {};
                        for (var intIndex = 0; intIndex < data.length; intIndex++) {
                            objFormData[data[intIndex].name] = data[intIndex].value;
                        }

                        $.automation.worker
                            .postJson(this.action,
                                JSON.stringify(objFormData),
                                function(data) {});

post json function:

    postJson: function(url, data, callback) {          
        $.LoadingOverlay("show");

        $.ajax({
            url: url,
            type: "POST",
            data: data,
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                if (callback)
                    callback(data);

                $.LoadingOverlay("hide");
            }
        });

How to add array to form when using jquery submit?

2 Answers2