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
– charlietfl, Commented Nov 12, 2016 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) or if your dynamically adding items refer this answer — user3559349
– user3559349, Commented Nov 12, 2016 at 23:31
Then the script simply becomes $("#createTankForm").submit(function() { $.post(yourUrl, $(this).serialize(), function() { — user3559349
– user3559349, Commented Nov 12, 2016 at 23:33

Hafiz Bilal · Accepted Answer · 2016-11-12 14:59:35Z

1

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.

edited Nov 12, 2016 at 14:59

answered Nov 12, 2016 at 14:44

Hafiz Bilal

1139 bronze badges

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

3 Comments

ThunD3eR Over a year ago

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

Hafiz Bilal Over a year ago

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.

ThunD3eR Over a year ago

Thats another way o do it. Although I prefer the answer I showed below

ThunD3eR · Accepted Answer · 2016-11-12 14:59:57Z

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");
            }
        });

Collectives™ on Stack Overflow

How to add array to form when using jquery submit?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related