jquery collect data from form into multiple objects

Question

I'm not entirely sure how to do this.

but I have a form, with some divs within containing multiple input, textareas. and I want to collect these into a multidimensional array. kinda like this:

{
    "jason" : {
        "name" : "Jason Lengstorf",
        "age" : "24",
        "gender" : "male"
    },
    "kyle" : {
        "name" : "Kyle Lengstorf",
        "age" : "21",
        "gender" : "male"
    }
}

but I'm not entirely sure how to do it, and google is not helping. my html looks like this

<form class="testForm" method="POST">

    <div class="uploadForm">
        <input class="uploadedFile" name="form1[]name[]" type="text" value="myname" />
        <input class="uploadedFile" name="form1[]phone[]" type="text" value="2019192" />
        <input class="uploadedFile" name="form1[]text[]" type="text" value="sometext" />
    </div>

    <div class="uploadForm">
        <input class="uploadedFile" name="form2[]name[]" type="text" value="myname" />
        <input class="uploadedFile" name="form2[]phone[]" type="text" value="2019192" />
        <input class="uploadedFile" name="form2[]text[]" type="text" value="sometext" />
    </div>


    <button>save</button>
</form>

and the script collecting

<script>
    $( document ).ready(function() {

        $(".testForm").submit(function(e) {
        e.preventDefault();


        var $form = $(this);

        var $inputs = $form.find("input, select, button, textarea");

        var serializedData = $form.serializeArray();
        $inputs.prop("disabled", true);

        alert(JSON.stringify(serializedData));

        })

    });
</script>

You're going to have to use `serializeArray` and then format the data yourself, see: http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery — jungy, Feb 18 '15 at 00:08
possible duplicate of [How do I send a complex JSON object from an HTML form using SYNCHRONOUS page POST?](http://stackoverflow.com/questions/23355017/how-do-i-send-a-complex-json-object-from-an-html-form-using-synchronous-page-pos) — EternalHour, Feb 18 '15 at 00:11
As i can see from the fiddle demo, i only get the array in one level — bymem, Feb 18 '15 at 08:39

score 0 · Accepted Answer · answered Feb 18 '15 at 00:11

0

SerializeJSON works really well for what you're trying to achieve here.

https://github.com/marioizquierdo/jquery.serializeJSON

answered Feb 18 '15 at 00:11

Chris W. Burke

40
4

This is a great plugin and a good answer. @bymem See this [demo](http://jsfiddle.net/awolf2904/ty3nj064/) for serializeJSON and it works as you wanted it. I had only to rename the objects to meet your requirement. – AWolf Feb 18 '15 at 00:51
this kinda help me, i went with another plugin. They do the same thing. So thanks for the help. – bymem Feb 18 '15 at 08:33

score 0 · Answer 2 · answered Feb 18 '15 at 00:36

0

First I would try usind id's <form class="testForm" method="POST" id="testForm">

then use:

var formData = JSON.stringify($("#testForm").serializeArray());

you will get a json out of your form

answered Feb 18 '15 at 00:36

Rob Martínez

3
3

jquery collect data from form into multiple objects

2 Answers2