How to create create JSON object ( of form elements) of dynamic html form?

Question

Trying to create dynamic HTML forms and save them, I can create dynamic forms using bootstrap but on submit i am struggling to create JSON of this dynamic form. I am looking to save something like this

{
 "form" :
    [

        {
            "name" : "username",
            "id" : "txt-username",
            "caption" : "Username",
            "type" : "text",
            "placeholder" : "E.g. [email protected]"
        },
        {
            "name" : "password",
            "caption" : "Password",
            "type" : "password"
        },
        {
            "type" : "submit",
            "value" : "Login"
        }
    ]
}

I am not sure how i can achieve this.

what exacltly you want to achieve? you want to send all your form propertis? or only inputs? — nowiko
– nowiko, Commented Dec 19, 2014 at 10:19
All form properties which i created dynamically (html form). I want to save that JSON object of that form properties (type, value(if any), name, id..). — user986508
– user986508, Commented Dec 19, 2014 at 10:21
for send only values you can use $("form").serializeArray();...but for attributes I dont know...I think attr() function may help you. — nowiko
– nowiko, Commented Dec 19, 2014 at 10:25
I was trying with DOM, but there should be some standard way.. Ahhh — user986508
– user986508, Commented Dec 19, 2014 at 10:28

Johan Karlsson · Accepted Answer · 2014-12-19 11:39:23Z

5

This should do it:

function getAttrs(DOMelement) {
    var obj = {};
    $.each(DOMelement.attributes, function () {
        if (this.specified) {
            obj[this.name] = this.value;
        }
    });
    return obj;
}

$("form").each(function () {
    var json = {
        "form": []
    };
    $(this).find("input").each(function () {
        json.form.push(getAttrs(this));
    });

    $(this).find("select").each(function () {
        var select = getAttrs(this);
        select["type"] = "select";
        var options = [];
        $(this).children().each(function () {
            options.push(getAttrs(this));
        });
        select["options"] = options;
        json.form.push(select);
    });

    console.log(json);
});

DEMO: http://jsfiddle.net/j1g5jog0/

Update: http://jsfiddle.net/j1g5jog0/5/

edited Dec 19, 2014 at 11:39

answered Dec 19, 2014 at 10:43

Johan Karlsson

6,4761 gold badge22 silver badges28 bronze badges

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

4 Comments

user986508 Over a year ago

There is one issue, <select> and its <options> are not captured by this solution.

Johan Karlsson Over a year ago

@user986508 Ok, how you do you want select stored then, something like this? {"type": select, "options": [{...}, {...}, {...}]}

user986508 Over a year ago

yes something like this, { "form": [ { "name": "username", "id": "txt-username", "caption": "Username", "type": "text", "placeholder": "E.g. [email protected]" }, { "name": "password", "caption": "Password", "type": "password" }, { "name": "country", "type": "select", "options": [ { "name": "Japan" }, {"name": "Thailand"},{"name": "Spain"}]}]}

rachana Over a year ago

@caeth Thank you for the examples you have provided.Can you please help me that how can we see the data in successfully created in json object?

Collectives™ on Stack Overflow

How to create create JSON object ( of form elements) of dynamic html form?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related