jfield.js是一个jQuery动态表单操作插件，允许您在网页上以编程方式快速轻松地创建表单字段。

您还可以动态更新和删除表单字段，而无需刷新/重新加载页面或将数据发布回服务器。对于那些必须在应用程序中创建多个表单或为不同用户生成多个表单的开发人员来说，这很有用。

如何使用它:

1.下载并加载jfield.jsjQuery库之后的脚本。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/jfield.js"></script>

2.使用生成表单字段杰菲尔德方法：

• 类型：字段类型：“文本”、“复选框”、“数字”、“单选”、“下拉列表”、“按钮”等。
• 属性：自定义字段属性
• 预设：字符串或布尔值、数字或函数，具体取决于字段类型
• 标签：标签文本
• 值：“复选框”、“单选框”和“下拉框”的值

$(Selector).jfield(type, {
  attrs: {},
  preset: '',
  label: '',
  value: '',
});

// Examples

// Textbox
$('#mytextbox').jfield('text', {
  attrs: {name: "thetextbox", id: "_text", class: "form-control"},
  preset: "Sample Text",
  label: 'A Text Box',
});

// Number
$('#mynumber').jfield('number', {
  attrs: {name: "mynumber", id: "_number", class: "form-control"},
  preset: 10,
  label: 'A Number',
});

// Checkbox
$('#mycheckbox').jfield('checkbox', {
  value: ['1','2','3'],
  attrs: {name: "checkableitem"},
  preset: 1,
  label: ['A Checkbox','Another','Final Checkbox'],
});

// Radio
$('#myradio').jfield('radio', {
  value: ['1','2','3'],
  attrs: {name: "whichoption"},
  preset: true,
  label: ['Radio Option 1','Radio Option 2','Radio Option 3'],
});

// Dropdown
$('#mydrop').jfield('dropdown', {
  value: ['1','2','3','4'],
  attrs: {name: "selectionbox", id: "_dropdown", class: "form-control"},
  preset: '1',
});

// Button
$('#mybutton').jfield('button', {
  value: 'Button',
  attrs: {name: "thisisabutton", id: "_button"},
  label: 'This is a button',
});

// Special preset
$('#presetty').jfield('text', {
  attrs: {name: 'specialpreset', id: '_preset', class: "form-control"},
  preset: function(_, $field) {
    var rando = Math.ceil(Math.random() * 100);
    $field.find("input").val(rando.toString());
  },
  label: 'Specially set field',
})

3.获取字段的值。

// basic
$(Selector).jfield('getValue');

// get the values of buttons
$(Selector).jfield('getValue', {
  getButtons: true
});

// allow multiple values under the same name
$(Selector).jfield('getValue', {
  overwrite: false
});

4.更新字段的值。

$(Selector).jfield("setValue", "Another Value");
$(Selector).jfield("setValue", 123);

5.销毁并从DOM中删除表单字段。

$(Selector).jfield('destroy');

预览截图

以编程方式创建和更新表单字段 jQuery jfield.js