javascript - 动态使用 json 数据创建输入字段

Question

我正在使用 jQuery 从 json 动态构建一个表单，我想向我的表单添加输入字段(例如姓名、年龄、地址、电子邮件)。

到目前为止，这是我的代码:

$(function () { 
//Form JSON
var _form=
{
    "sample_form":
    {
        'Title': 'Form using Jquery/JSON',
        'id': 'test_form',
        'action': 'thanks.html',
        'method': 'post',
        'fields':
        [
            {'id':'txtName' , 'caption':'Name' , 'type':'text' , 'required':'true'},
            {'id':'txtNum' , 'caption':'Age' , 'type':'number' , 'required':'false'},
            {'id':'txtAddress' , 'caption':'Address' , 'type':'address' , 'required':'false'},
            {'id':'txtEmail' , 'caption':'Email' , 'type':'email' , 'required':'true'}
        ]
    }
};

//Creating Form

$('div#form2').append(

    //***********************Header*******************
    $('<br/>'),
    $('<span/>').hide(),
    $("<h2/>").text(_form.sample_form.Title),

    //***********************Form*********************
    $('<form/>',
        {
            id: _form.sample_form.id,
            action: _form.sample_form.action,
            method: _form.sample_form.method
        }
    ).append(
        for (var i = 0; i <_form.sample_form.fields.length ; i++)
        {
            $('<input/>',{ type: i.type , required: i.required , id: i.id})
        }           
    )
);});    

fiddle

Answer 1

• for 应该在 .append() 之外，正如@giorgio 已经提到的；
• 在 for 中，i.type(和其他)应替换为 _form.sample_form.fields[i].type。<

Updated fiddle .

更改部分代码:

//Creating Formm

var arr = [];
for (var i = 0; i <_form.sample_form.fields.length ; i++)
{
    var element = _form.sample_form.fields[i];
    arr.push($('<input/>',{ type: element.type , required: element.required , id: element.id}));
}

$('div#form2').append(

    //***********************Header*******************
    $('<br/>'),
    $('<span/>').hide(),
    $("<h2/>").text(_form.sample_form.Title),

    //***********************Form*********************

    $('<form/>',
        {
            id: _form.sample_form.id,
            action: _form.sample_form.action,
            method: _form.sample_form.method
        }
    ).append(arr)
);

});