CODEWITHSUNDEEP
javascriptjqueryhtmljson
Amit Kumar
Amit Kumar

Reputation: 5962

Create JSON from dynamic form generation

I'm creating a dynamic form. Which has drag and drop feature. When Admin has completed the form creation,I have to save form details in Db.

Fiddle link for Form Generation

I don't know from where to start or how to traverse the form to save in json format.

I was to save Json format like this

var formDetails = [

        {
            "type":"textbox",
            "label":"Please enter your name",
            "id":"txt-1465133974748"
        },
        {
            "type":"select",
            "label":"Please Select Option",
            "id":"select-1865133974748",
            "fieldOptionDetails":[
            {
                "fieldLabel":"Option 1",
                "fieldValue":"1"
            },
            {
                "fieldLabel":"Option 2",
                "fieldValue":"2"
            }]
        }];

Upvotes: 0

Views: 238

Answers (1)

flamelite
flamelite

Reputation: 2854

$('#btnSaveForm').on('click',function(){
var formdetail = [];
$("ul#form-Container li").each(function(){
    var input = {};// crate an object
    // access each form li elements and add the attributes to input object
    input.type = "textbox / select";  // depending on your form field type
    input.label = "form field label"; // similarly add other fields also
   formdetail.push(input) ; // add object to formdetail array
 });
JSON.stringify(formdetail); // use josn.stringify(array)
});

Upvotes: 1

Related Questions