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

我正在使用

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})
        }           
    )
);});    

$（函数（）{
//表单JSON
变量形式=
{
“样本表格”：
{
'Title'：'formusingjquery/JSON'，
'id'：'test_form'，
“操作”：“谢谢.html”，
'method'：'post'，
“字段”：
[
{'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'}
]
}
};
//创建表单
$（'div#form2'）。追加(
//***********************标题*******************
$（“
”），
$（''）.hide（），
$（“”）文本（_form.sample_form.Title），
//***********************形式*********************
$('',
{
id:_form.sample_form.id，
动作：_form.sample_form.action，
方法：_form.sample_form.method
}
).附加(
对于（var i=0；i您已经添加了一个for循环作为append函数的参数。您应该将其取出，并在每次迭代时追加。示例：

var myForm = $('<form/>');
for(var i = 0; i <_form.sample_form.fields.length ; i++)
{
    myForm.append('<input/', { /* paramaters */ });
}

var myForm=$（''）；
对于（var i=0；i

正如@giorgio已经提到的，
的
应该在
.append（）
之外
在
中，对于
，应将
i.type
（和其他）替换为
\u form.sample\u form.fields[i]。type



代码的更改部分：

//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)
);

//创建表单
var-arr=[]；
对于（var i=0；我认为这非常有效。太好了！谢谢。