如何将表单字段转换为Json Object？

Question

For example the form contains fields with the following names txt01, txt02, txt03[], txt03[], txt04[name][], txt04[name][], txt04[phone][], txt04[phone][], txt05[][name], txt05[][phone], txt05[][name], txt05[][phone]. When I input values to those fields and click the submit button it should generate the below Json Object:

Object {
    txt01: "Text 01",
    txt02: "Text 02",
    txt03: Array(2) {
        0: "Text 01",
        1: "Text 02"
    },
    txt04: Object 
    {
        name: Array()
        {
            0: Text 01
            1: Text 02
        },

        phone: Array()
        {
            0: 000001
            1: 000002
        }
    },
    txt05: Array(2) 
    {
        0: Object
        {
            name: Text 01
            phone: 000001
        },

        1: Object
        {
            name: Text 02
            phone: 000002
        }
    }

}

Below is the form that is to be serialize to Json Object. The script that will perform the serialization should generate the above Json Object.

<form>
    <input type="text" name="txt01" value="Text 01" />
    <input type="text" name="txt02" value="Text 02" />

    <input type="text" name="txt03[]" value="Text 01" />
    <input type="text" name="txt03[]" value="Text 02" />

    <input type="text" name="txt04[name][]" value="Text 01" />
    <input type="text" name="txt04[name][]" value="Text 02" />
    <input type="text" name="txt04[phone][]" value="000001" />
    <input type="text" name="txt04[phone][]" value="000002" />

    <input type="text" name="txt05[][name]" value="Text 01" />
    <input type="text" name="txt05[][phone]" value="000001" />
    <input type="text" name="txt05[][name]" value="Text 02" />
    <input type="text" name="txt05[][phone]" value="000002" />

    <input type="submit" value="Submit" />
</form>

Answer 1

I was doing some research on it here yet I didn't find a respond that fits on what I am doing so I created a solution. For more details you can visit it here https://github.com/citnvillareal/serializeObject

Please don't hesitate to contribute. I hope this can help.

Answer 2

Just want to share my ideas on this. I just develop an application form to json using native javascript. You may visit this link: https://github.com/jhanxtreme/form-to-json

EXAMPLE FORM

<form name="f1" onsubmit="return formToJson(this);">
   <input type="text" name="username" value="dummyuser" / >
   <input type="password" name="password" value="password123" />
   <input type="submit" />
</form>

JSON OUTPUT:

{
 username:"dummyuser",
 password:"password123"
}

Also this will map most of the form elements including HTML5 into JSON data. Hope this helps you.

Answer 3

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

This is from Convert form data to JavaScript object with jQuery

You might try looking around a bit for something that sounds like a lot of people could use :)

Answer 4

still not clear the requirement but i guess you can do something like that

 var frm = $('form');
 var data = JSON.stringify(frm.serializeArray());

Answer 5

var myObj = new Object();
myObj.text01 = "Text 01";
myObj.text02 = "Text 02";
.
.
.
var string =JSON.stringify(myObj);