Question

我正在使用json从jQuery动态构建表单，我想在表单中添加输入字段（例如姓名，年龄，地址，电子邮件）。

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

$(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)
);

}）;

Answer 2

您已添加for循环作为追加功能的参数。你应该把它拿出来，并附加每次迭代。例如：

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

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

2 个答案: