Generate form automatically with config file

Question

I am building a website to help operator of my team to generate a data source config.

Since there are many options need to be handled. I design an common solution to render the page: parse a config file(maybe, xml or json format) to html with some rules. Maybe something like below:

{
    "data_type": {
        "title": "Data type",
        "description": "Select what type do you want.",
         "fields": [{
             "title": "promotion",
             "description": "data from promotion center"
             "type": "redio",
             "default": true,
             "value": "p",
             "name": "dtype"
         }, {
             "title": "brands",
             "description": "data from brands center"
             "type": "redio",
             "default": false,
             "value": "b",
             "name": "dtype"
         }]
    }
}

then it can be parsed as:

<div class="form-control-group">
    <h3>Data type</h3>
    <p>Select what type do you want.</p>
    <div class="form-control-filed">
        <input type="redio" name="dtype" value="p" show="dtype" checked />
        <p>data from promotion center</p>
    </div>
    <div class="form-control-filed">
        <input type="redio" name="dtype" value="b" />
        <p>data from brands center</p>
    </div>
</div>

This step is easily to implement. But since there are some cases like. When I click redio A, I wanna hide the checkbox B. After I unchecked Checkbox C, I wanna show up the input D. I have no idea about how to design the config file to describe the logic about different fields.

So, the key point is, I wanna parse the html by a json snippet. Then maybe there are some symbols to mark the behavior of each form field, I can use my common js to bind events to handle the show/hide, focus/blur or something else logic. Like the attribute show , I can use my common js function to detect it and bind click event to that radio button, and show up the element with name="dtype" after this radio is clicked.

I am not sure if it is a good solution and how to design an reasonable json structure.

Hope any one can provide some suggestions. Thanks in advance.

Answer 1

I've given up for this case. For my requirement, I use a json file to config the information of the form field with a behavior definition to describe show/hide functionality.

{
    "xxx": {
        "title": "Price mode",
        "description": "group_description",
        "fields": [{
            "title": "",
            "type": "select",
            "name": "price_mode",
            "value": [{
                "text": "Store with product",
                "value": 1,
                "default": true,
                "behaviors": {
                    "show": "name1|name2|name3",
                    "hide": ""
                }
            }, {
                "text": "Product",
                "value": 2,
                "default": false,
                "behaviors": {
                    "show": "",
                    "hide": "name1|name2|name3"
                }
            }],
            "require": true,
            "rule": ""
        }]
    }
}

Codes of server side will parse this config and render as html snippet with special attribute storing behavior definition, then use javascript functions handle these attributes and care about the behavior after doing something like click the radio button or change the value of select list.