FancyGrid Form FieldSet

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container"></div>

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  new FancyForm({
    renderTo: 'container',
    title: 'Register',
    width: 420,
    height: 510,
    items: [{
      type: 'set',
      label: 'User Info',
      checkbox: true,
      items: [{
        type: 'string',
        label: 'Login',
        emptyText: 'Login',
        name: 'login'
      }, {
        type: 'password',
        label: 'Password',
        emptyText: 'Password',
        name: 'password'
      }]
    }, {
      type: 'set',
      label: 'Contact Information',
      items: [{
        type: 'string',
        label: 'First Name adress',
        emptyText: 'First Name',
        name: 'name'
      }, {
        type: 'string',
        label: 'Last Name',
        emptyText: 'Last Name',
        name: 'surname'
      }, {
        type: 'string',
        label: 'Company',
        emptyText: '',
        name: 'company'
      }, {
        type: 'string',
        label: 'Email',
        emptyText: '',
        name: 'email'
      }, {
        type: 'combo',
        label: 'State',
        emptyText: '',
        name: 'state',
        data: stateData,
        displayKey: 'state',
        valueKey: 'key'
      }, {
        type: 'date',
        label: 'Birthday',
        name: 'birthday'
      }]
    }],
    buttons: ['side', {
      text: 'Clear',
      handler: function() {
        this.clear();
      }
    }, {
      text: 'Register',
      handler: function() {
        this.get();
      }
    }]
  });
});

var stateData = [{
  index: 0,
  key: "AL",
  state: "Alabama"
}, {
  index: 1,
  key: "AK",
  state: "Alaska"
}, {
  index: 2,
  key: "AZ",
  state: "Arizona"
}, {
  index: 3,
  key: "AR",
  state: "Arkansas"
}, {
  index: 4,
  key: "CA",
  state: "California"
}, {
  index: 5,
  key: "CO",
  state: "Colorado"
}, {
  index: 6,
  key: "CT",
  state: "Connecticut"
}, {
  index: 7,
  key: "DE",
  state: "Delaware"
}, {
  index: 8,
  key: "DC",
  state: "District of Columbia"
}, {
  index: 9,
...