Fork me on GitHub

Example: Basic keyvalue field creation

How to create a keyvalue field.

Basic KeyValueField creation

The KeyValueField makes it easy to build a search form from an existing inputEx definition

HTML

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

JavaScript

Implementation

YUI().use('inputex-keyvalue','inputex-group','inputex-combine','inputex-string','inputex-url','inputex-list','inputex-select', 'json', function(Y){
   

      var field = new Y.inputEx.KeyValueField({
         parentEl: 'container1',
         availableFields: [
            {type: 'string', name: 'lastname', label: 'Lastname' },
            {type: 'string', name: 'firstname', label: 'Firstname' },
            {type: 'select', name: 'gender', label: 'Gender', choices: ["Mr","Mrs","Ms"] }
         ]
      });
      
      var button = Y.inputEx.cn('button', null, null, 'getValue()');
      Y.one('#container1').appendChild(button); 
      Y.one(button).on('click', function() { alert( Y.JSON.stringify(field.getValue())); });  
         

});