Dynamic form configuration

by Ben Bankes

HTML

<div id="form_wrapper"></div>

JavaScript

var k = 4;
var str = [
    {type: "button", name: "form_button_1", value: "Add"},
    {type: "fieldset", name: "form_fieldset_1", label: "Fieldset",
     list: [
         {type: "input", name: "form_input_1", label: "Input"},
         {type: "input", name: "form_input_2", label: "Input"}
     ]
    },
    {type: "fieldset", name: "form_fieldset_2", label: "Fieldset2",
     list: [
         {type: "input",  name: "form_input_3", label: "Input"},
         {type: "input", name: "form_input_4",label: "Input"}
     ]
    },
    {type: "fieldset", name: "form_fieldset_3", label: "Fieldset3",
     list: [
         {type: "input", name: "form_input_5", label: "Input"},
         {type: "input", name: "form_input_6", label: "Input"}
     ]
    },
    {type: "button", name: "form_button_2", value: "Remove"},
    {type: "button", name: "form_button_3", value: "Save"},
    {type: "button", name: "form_button_4", value: "Save JQ"}
];

renderForm();

function renderForm() {
    for (var i in str) {
        var element_spec = str[i];
        var form_wrapper = document.getElementById('form_wrapper');
        renderElement(form_wrapper, element_spec);
    }
}

function renderElement(container, spec) {
    switch (spec.type) {
        case 'fieldset':
            renderFieldset(container, spec);
            break;
        default:
            renderInputElement(container, spec);
            break;
    }
}

function renderInputElement(container, spec) {
    if (spec.label) {
        renderInputLabel(container, spec.label);
    }
    
    var input_element = document.createElement('input');
    
    if (spec.type === 'input') {
        var input_type = 'text';
    } else {
        var input_type = spec.type;
    }
    
    input_element.setAttribute('type', input_type);
    input_element.setAttribute('name', spec.name);
    
    if (spec.value) {
        input_element.setAttribute('value', spec.value);
    }
    
    container.appendChild(input_element);
    
   ...