Create & Update Form Fields Programmatically - jQuery jfield.js

jfield.js is a jQuery dynamic form manipulation plugin that allows you to quickly and easily create form fields programmatically on your web pages.

You can also update & delete the form fields dynamically without refreshing/reloading the page or posting data back to the server. It is useful for developers who have to create several forms in an application or generate multiple forms for different users.

How to use it:

1. Download and load the jfield.js script after jQuery library.

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

2. Generate form fields using the jfield method:

• type: field type: 'text', 'checkbox', 'number', 'radio', 'dropdown', 'button', etc.
• attrs: custom field attributes
• preset: String or Boolean or Number or function, depending on the field type
• label: label text
• value: Values for 'checkbox', 'radio', and 'dropdown'

$(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. Get the values of fields.

// 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. Update the values of fields.

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

5. Destroy and remove the form fields from the DOM.

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

---

This awesome jQuery plugin is developed by ZWhit196. For more Advanced Usages, please check the demo page or visit the official website.