Use the following code to create a basic inputEx RadioField.
new Y.inputEx.RadioField({
label: 'Where did you learn about inputEx ?',
name: 'example1',
choices: [ // choices: [ <- alternative syntax (shorter)
{ value: 'Ajaxian' }, // 'Ajaxian', <-
{ value: 'YUI blog' }, // 'YUI blog', <-
{ value: 'Other' } // 'Other' <-
], // ], <-
value:'Ajaxian',
parentEl: 'container1'
});
Use the following code to create choices with labels different from values
new Y.inputEx.RadioField({
label: 'Where are you from ?',
name: 'example2',
choices: [ // no alternative syntax
{ value: 'us', label: 'United States of America' },
{ value: 'fr', label: 'France' }
],
parentEl: 'container2'
});
How to listen to the updated event :
var el, field, button, val, logDiv;
el = Y.one('#container3');
field = new Y.inputEx.RadioField({ name: 'example3', label: 'Where are you from ?', choices: [{ value: 'us', label: 'United States of America' }, { value: 'fr', label: 'France' }], parentEl: el });
button = inputEx.cn('button', null, null, "SetValue with 'us'");
el.appendChild(button);
val = 'us';
Y.one(button).on("click" ,function() {
field.setValue(val);
val = (val == 'fr') ? 'us' : 'fr';
button.innerHTML = "SetValue with '"+val+"'";
});
logDiv = 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(inputEx.cn('br'));
});
Display the choices vertically, style currently selected choice...
new Y.inputEx.RadioField({
label: 'Where did you learn about inputEx ?',
display:'vertically', // instead of default implicit "display:'inline'"
name: 'example4',
choices: ['Ajaxian','YUI blog','Other'],
parentEl: 'container4'
});
// + CSS : underline selected choice
//
//
The "allowAny" option adds a radio associated to a StringField to let the user enter any value.
var field2 = new Y.inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example5', choices: ['Ajaxian','YUI blog'], parentEl: 'container5', allowAny: true});
field2.on('updated', function(value) {
Y.one('#container5').appendChild( inputEx.cn('div',null,null, "Updated with value: "+value) );
});
More options with allowAny (separators, default value, validator, etc.)
var field, el, button1, button2, button3;
el = Y.one('#container6');
field = new Y.inputEx.RadioField({
label: 'Would you like to receive an email reminder ?',
name: 'example6',
display: 'vertically',
choices: [{ value: '0', label: 'No' }],
value: '0', // default value, also used by clear() method
parentEl: 'container6',
allowAny: {
separators:['Yes, ',' hours before the event'],
value:'3', // default value for allowAny field, not for radioField
validator: function(val) {
var num = parseInt(val,10);
return (val === ""+num && num >= 1 && num <= 48);
}
},
messages: {invalid:"Hours should be between 1 and 48."},
showMsg:true,
required:true
});
field.on('updated', function(value) {
el.appendChild( inputEx.cn('div',null,null, "Updated with value: "+value) );
});
button1 = inputEx.cn('button', null, null, 'setValue("6")');
el.appendChild(button1);
Y.one(button1).on('click', function() { field.setValue("6"); });
button2 = inputEx.cn('button', null, null, 'getValue()');
el.appendChild(button2);
Y.one(button2).on('click', function() { alert(field.getValue()); });
button3 = inputEx.cn('button', null, null, 'clear()');
el.appendChild(button3);
Y.one(button3).on('click', function() { field.clear(); });
/* Style
#container6 div.inputEx-StringField-wrapper input {width: 25px;}
*/
Use a custom field in allowAny
var field, el, button1, button2, button3;
el = Y.one('#container7');
field = new Y.inputEx.RadioField({
label: 'Would you like to receive an email reminder ?',
name: 'example6bis',
display: 'vertically',
choices: [{ value: 0, label: 'No' }, { value: 1440, label: 'Yes, 1 day before the event (recommended)'}],
value: 1440, // default value, also used by clear() method
parentEl: el,
allowAny: {
field: {
type: "timeinterval",
unit: inputEx.TimeIntervalField.units.MINUTE, // return value in 'minutes'
value: 7*24*60, // 1 week = 7 days,
fields: [
{type:'integer', value:1, required:true},
{
type: 'select',
choices: [
{ value: inputEx.TimeIntervalField.units.HOUR, label: inputEx.messages.timeUnits.HOUR },
{ value: inputEx.TimeIntervalField.units.DAY, label: inputEx.messages.timeUnits.DAY },
{ value: inputEx.TimeIntervalField.units.MONTH, label: inputEx.messages.timeUnits.MONTH }
]
}
],
separators:['Yes, ',false, ' before the event']
},
validator: function(val) {
return (val >= 120 && val <= 43200);
}
},
required:true,
messages: {invalid:"Reminder can be set between 2 hours and 1 month before the event"},
showMsg:true
});
field.on('updated', function(value) {
el.appendChild( inputEx.cn('div',null,null, "Updated with value: "+value+" (minutes)") );
});
Disable the field (to disable radio inputs individually, see another example below)
var el, field, button1, button2;
el = Y.one('#container8');
field = new Y.inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example8', choices: ['Ajaxian','YUI blog','Other'], value:'Ajaxian', parentEl: el});
button1 = inputEx.cn('button', null, null, 'disable()');
el.appendChild(button1);
Y.one(button1).on('click', function() { field.disable(); });
button2 = inputEx.cn('button', null, null, 'enable()');
el.appendChild(button2);
Y.one(button2).on('click', function() { field.enable(); });
Add choices dynamically
var el, field, button1, button2, button3, logDiv;
el = Y.one('#container9');
field = new Y.inputEx.RadioField({name: 'example9', choices: [{ value: 'United States of America' }, { value: 'France' }], parentEl: el});
button1 = inputEx.cn('button', null, null, "Add 'Spain' choice (and select 'Spain')");
Y.one(button1).on('click' ,function() {
field.addChoice({value:"Spain",selected:true});
button1.disabled = true;
});
button2 = inputEx.cn('button', null, null, "Add 'United Kingdom' choice (value : 'uk'), in position 1");
Y.one(button2).on('click' ,function() {
field.addChoice({value:"uk",label:"United Kingdom",position:1});
button2.disabled = true;
});
button3 = inputEx.cn('button', null, null, "Add 'Sweden' choice after 'France' choice");
Y.one(button3).on('click' ,function() {
field.addChoice({value:"Sweden",after:"France"});
button3.disabled = true;
});
el.appendChild(button1);
el.appendChild(button2);
el.appendChild(button3);
logDiv = 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(inputEx.cn('br'));
});
Remove choices dynamically
var el, field, button1, button2, button3, logDiv;
el = Y.one('#container10');
field = new Y.inputEx.RadioField({
name: 'example9',
choices: [
{ value: 'usa', label: 'United States of America' },
{ value: 'de', label: 'Germany' },
{ value: 'uk', label: 'United Kingdom' },
{ value: 'fr', label: 'France' },
{ value: 'se', label: 'Sweden' },
{ value: 'es', label: 'Spain' }
],
parentEl: el
});
button1 = inputEx.cn('button', null, null, "Remove 'Spain' choice (by label)");
Y.one(button1).on('click', function() {
field.removeChoice({label:"Spain"});
button1.disabled = true;
});
button2 = inputEx.cn('button', null, null, "Remove 'United Kingdom' choice (by value)");
Y.one(button2).on('click', function() {
field.removeChoice({value:"uk"});
button2.disabled = true;
});
button3 = inputEx.cn('button', null, null, "Remove 'Germany' choice (by position)");
Y.one(button3).on('click', function() {
field.removeChoice({position:1});
button3.disabled = true;
});
el.appendChild(button1);
el.appendChild(button2);
el.appendChild(button3);
logDiv = 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(inputEx.cn('br'));
});
Hide, show, disable or enable an choice in the selector, without removing it totally, and keeping the original choice's order
Note : disableChoice and enableChoice methods have no effect with IE < 8 because it did not support disabled="disabled" attribute.
var el, field, button1, button2, button3, button4, logDiv;
el = Y.one('#container11');
field = new Y.inputEx.RadioField({name: 'example11', choices: [ { value: 'usa', label: 'United States of America' }, { value: 'fr', label: 'France' }, { value: 'es', label: 'Spain' }], parentEl: el});
button1 = inputEx.cn('button', null, null, "Hide choice 'France'"); el.appendChild(button1);
button2 = inputEx.cn('button', null, null, "Show choice 'France'"); el.appendChild(button2);
button3 = inputEx.cn('button', null, null, "Disable choice 'Spain'"); el.appendChild(button3);
button4 = inputEx.cn('button', null, null, "Enable choice 'Spain'"); el.appendChild(button4);
logDiv = 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(inputEx.cn('br'));
});
Y.one(button1).on('click' ,function() {
field.hideChoice({value:'fr'});
logDiv.innerHTML += "[INFO] Hide choice 'France' (current value : "+field.getValue()+")";
logDiv.appendChild(inputEx.cn('br'));
});
Y.one(button2).on('click' ,function() {
field.showChoice({value:'fr'});
logDiv.innerHTML += "[INFO] Show choice 'France' (current value : "+field.getValue()+")";
logDiv.appendChild(inputEx.cn('br'));
});
Y.one(button3).on('click' ,function() {
field.disableChoice({label:'Spain'});
logDiv.innerHTML += "[INFO] Disable choice 'Spain' (current value : "+field.getValue()+")";
logDiv.appendChild(inputEx.cn('br'));
});
Y.one(button4).on('click' ,function() {
field.enableChoice({label:'Spain'});
logDiv.innerHTML += "[INFO] Enable choice 'Spain' (current value : "+field.getValue()+")";
logDiv.appendChild(inputEx.cn('br'));
});