# inputEx - CombineField Usage

## Basic CombineField creation

var field = new inputEx.CombineField({ parentEl: 'container1', label: 'Your name', description: 'Please enter your name', fields: [ { name: 'firstname', typeInvite: 'firstname' }, { name: 'lastname', typeInvite: 'lastname' } ], separators: [false," ",false], required:true }); var el = YAHOO.util.Dom.get('container1'); var button1 = inputEx.cn('button', null, null, "SetValue with ['Jimi','Hendrix']"); var val = ['Jimi','Hendrix']; el.appendChild(button1); YAHOO.util.Event.addListener(button1, "click" ,function() { field.setValue(val); val = (val[0] == 'Jimi') ? ['',''] : ['Jimi','Hendrix']; button1.innerHTML = "SetValue with "+((val[0] == 'Jimi') ? "['Jimi','Hendrix']" : "['','']"); }); var logDiv = inputEx.cn('div', null, null, "Log :"); el.appendChild(logDiv); field.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv.appendChild(inputEx.cn('br')); });

## Basic CombineField creation

new inputEx.CombineField({ parentEl: 'container2', label:'Select Datetime :', fields: [ {type: 'date', name: 'date', typeInvite: 'mm/dd/YYYY' }, {type: 'time', name: 'time' } ], separators: [false," ",false] });

## Field names

The names are automatically set on sub-fields, so that standard forms can work. Click the button and check the URL

new inputEx.Form( { fields: [ { name: 'firstVar', label: "First variable", value: "my-custom-value" }, { type: 'list', label: "My Array", maxItems: 4, minItems: 1, elementType: { type: 'combine', description: 'Please enter your name', name: 'this_is_a_test', fields: [ { name: 'firstname', typeInvite: 'firstname' }, { name: 'lastname', typeInvite: 'lastname' } ], value: ['Jimi','Hendrix'], name: "person", separators: [false," ",false], }, value: [['Jimi','Hendrix'], ['Eric', 'Clapton']], name: 'myarray', useButtons: true , sortable: true } ], buttons: [{type: 'submit', value: 'Test to send the GET request'}], method: 'GET', parentEl: 'container3' });