inputEx - CombineField Usage

Basic CombineField creation

Your name

Log :


1	var field = new inputEx.CombineField({
2	parentEl: 'container1',
3	label: 'Your name',
4	description: 'Please enter your name',
5	fields: [
6	{ name: 'firstname', typeInvite: 'firstname' },
7	{ name: 'lastname', typeInvite: 'lastname' }
8	],
9	separators: [false," ",false],
10	required:true
11	});
12
13	var el = YAHOO.util.Dom.get('container1');
14
15	var button1 = inputEx.cn('button', null, null, "SetValue with ['Jimi','Hendrix']");
16	var val = ['Jimi','Hendrix'];
17	el.appendChild(button1);
18	YAHOO.util.Event.addListener(button1, "click" ,function() {
19	field.setValue(val);
20	val = (val[0] == 'Jimi') ? ['',''] : ['Jimi','Hendrix'];
21	button1.innerHTML = "SetValue with "+((val[0] == 'Jimi') ? "['Jimi','Hendrix']" : "['','']");
22	});
23
24	var logDiv = inputEx.cn('div', null, null, "Log :");
25	el.appendChild(logDiv);
26	field.updatedEvt.subscribe(function(e,params) {
27	var value = params[0];
28	logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
29	logDiv.appendChild(inputEx.cn('br'));
30	});
	view plain \| print \| ?

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

Select Datetime :

:


1	new inputEx.CombineField({
2	parentEl: 'container2',
3	label:'Select Datetime :',
4	fields: [
5	{type: 'date', name: 'date', typeInvite: 'mm/dd/YYYY' },
6	{type: 'time', name: 'time' }
7	],
8	separators: [false," ",false]
9	});
	view plain \| print \| ?

Field names

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


1	new inputEx.Form( {
2	fields: [
3	{
4	name: 'firstVar',
5	label: "First variable",
6	value: "my-custom-value"
7	},
8
9	{
10	type: 'list',
11	label: "My Array",
12	maxItems: 4,
13	minItems: 1,
14	elementType: {
15	type: 'combine',
16	description: 'Please enter your name',
17	name: 'this_is_a_test',
18	fields: [
19	{ name: 'firstname', typeInvite: 'firstname' },
20	{ name: 'lastname', typeInvite: 'lastname' }
21	],
22	value: ['Jimi','Hendrix'],
23	name: "person",
24	separators: [false," ",false],
25	},
26	value: [['Jimi','Hendrix'], ['Eric', 'Clapton']],
27	name: 'myarray',
28	useButtons: true ,
29	sortable: true
30	}
31
32
33	],
34	buttons: [{type: 'submit', value: 'Test to send the GET request'}],
35	method: 'GET',
36	parentEl: 'container3'
37	);
	view plain \| print \| ?