3. Программируем генерацию формы из объекта на jQuery

---

Создаем объект даннх для разных вариаций форм:

const forms = {
    'legal': {
        1: {
            name: 'Форма компании',
            type: 'select',
            required: true,
            fields: {
                'empty': '',
                'ip': 'ИП',
                'ooo': 'OOO',
                'ao': 'АО',
            }
        },
        2: {
            name: 'Наименование',
            type: 'text',
            required: true,
        },
        3: {
            name: 'ИНН',
            type: 'text',
            required: true,
        },
        4: {
            name: 'Комментарий',
            type: 'textarea',
            required: true,
        },
        5: {
            name: 'Отправить',
            type: 'button',
            required: true,
        },
    },
    'private': {
        1: {
            name: 'ФИО',
            type: 'text',
            required: true,
        },
        2: {
            name: 'Возраст',
            type: 'text',
            required: true,
        },
        3: {
            name: 'Пол',
            type: 'select',
            required: true,
            fields: {
                'empty': '',
                'man': 'Мужской',
                'woman': 'Женский', 
            }
        },
        4: {
            name: 'Комментарий',
            type: 'textarea',
            required: true,
        },
        5: {
            name: 'Отправить',
            type: 'button',
            required: true,
        },
    },
}

Создаем функцию обхода всех полей выбранной вариации ветки полей:

function createForm (object) {
    $.each(object, function(key, value) {
        createFormField (value);
    });
}

Пишем функцию создания полей формы по указанному типу

function createFormField (object) {
    let element = $('<div>').attr({
        'class': 'form-item',
    });

    if (object.type != 'button') {
        let label = $('<label>').text(object.name);
        element.append(label);
    }

    switch (object.type) {
        case 'text':
            let input =  $('<input>').attr({
                'type': object.type,
            });

            element.append(input);
            break;
        case 'select':
            let select =  $('<select>');

            $.each(object.fields, function(fieldKey, fieldValue) {
                let option = $('<option>').attr({
                    'value': fieldKey
                }).text(fieldValue);

                select.append(option);
            });

            element.append(select);
            break;
        case 'textarea':
            let textarea =  $('<textarea>');
            element.append(textarea);
            break;
        case 'button':
            let button =  $('<button>').text(object.name);
            element.append(button);
            break;
    }

    $('form').append(element);
}

Выводим прослушиватель события на выбор первонанального поля формы. Далее выводим поля выбранной ветки.

$(function() {
    $('select[name="type"]').change(function() {
        let type = $(this).val();
        $('.form-item').each(function(i, obj) {
            if (i != 0) {
                obj.remove();
            }
        });
        createForm (forms[type]);
    });
});