how to convert form fields to 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>

You need to explain a bit more,maybe show some HTML and how you are trying to do it currently? — Varun, Aug 03 '15 at 17:20
@Varun already made a solution to this you might want to check this out https://github.com/citnvillareal/serializeObject. But if you have something to contribute from it, please don't hesitate to do so. I will greatly appreciate it. As requested I also added the form. — Neil Villareal, Aug 04 '15 at 02:24

score 1 · Answer 1 · answered Aug 03 '15 at 17:22

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.

Jhan Mateo · Answer 2 · 2015-08-04T05:32:18.703

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.

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

$.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 :)

edited May 23 '17 at 12:15

Community

1
1

answered Aug 03 '15 at 17:21

Clay Sills

235
1
9

I already tried this but it just maps the field name directly to be the index of the object. – Neil Villareal Aug 03 '15 at 17:34

score 0 · Answer 4 · answered Aug 04 '15 at 05:24

0

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

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

answered Aug 04 '15 at 05:24

Gayan

2,750
5
47
88

JSON.stringify function will just convert the object generated by serializeArray to String. For clarification of the question: Upon submission of the form you should be able to convert the form fields to json object. – Neil Villareal Aug 04 '15 at 05:34

score 0 · Answer 5 · answered Jun 02 '16 at 10:47

0

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

answered Jun 02 '16 at 10:47

DPA

31
1
1
7

1

While this code snippet may solve the question, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Box Box Box Box Jun 02 '16 at 11:44

how to convert form fields to Json Object?

5 Answers5