Fork me on GitHub

Example: Basic serialize field creation

How to create a serialize field.

Basic SerializeField creation (JSON serialization)

HTML

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

JavaScript

Implementation

YUI().use('inputex-group', 'inputex-time', 'inputex-serialize', function (Y) {

    // Example 1
    var field = new Y.inputEx.SerializeField({
        parentEl: 'container1',
        label: 'Your name',
        description: 'Please enter your name',
        subfield: {
            type: 'group',
            fields: [
                { name: 'firstname', placeholder: 'firstname' },
                { name: 'lastname', placeholder: 'lastname' }
            ],
            required:true
        }
    });

    var el = Y.one('#container1');

    var button_label = "SetValue with '{\"firstname\":\"Jimi\",\"lastname\":\"Hendrix\"}'";
    var button = Y.inputEx.cn('button', null, null, button_label);
    el.appendChild(button);
    Y.one(button).on('click' ,function() {
       field.setValue('{"firstname":"Jimi","lastname":"Hendrix"}');
    });

    var logDiv = Y.inputEx.cn('div', null, null, "Log :");
    el.appendChild(logDiv);
    field.on('updated', function(value) {
        logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
        logDiv.appendChild(Y.inputEx.cn('br'));
    });

});