inputEx - RadioField Usage

Basic RadioField creation

Use the following code to create a basic inputEx RadioField.

1new inputEx.RadioField({ 
2    label: 'Where did you learn about inputEx ?', 
3    name: 'example1', 
4    choices: [                    // choices: [       <- alternative syntax (shorter) 
5        { value: 'Ajaxian' },     //    'Ajaxian',    <- 
6        { value: 'YUI blog' },    //    'YUI blog',   <- 
7        { value: 'Other' }        //    'Other'       <- 
8    ],                            // ],               <- 
9    value:'Ajaxian', 
10    parentEl: 'container1' 
11}); 
view plain | print | ?

Differentiate choices' labels and values

Use the following code to create choices with labels different from values

1new inputEx.RadioField({ 
2    label: 'Where are you from ?', 
3    name: 'example2', 
4    choices: [                                                // no alternative syntax 
5        { value: 'us', label: 'United States of America' }, 
6        { value: 'fr', label: 'France' } 
7    ], 
8    parentEl: 'container2' 
9}); 
view plain | print | ?

Updated event

How to listen to the updated event :

Log :
1var el, field, button, val, logDiv; 
2 
3el = YAHOO.util.Dom.get('container3'); 
4field = new inputEx.RadioField({ name: 'example3', label: 'Where are you from ?', choices: [{ value: 'us', label: 'United States of America' }, { value: 'fr', label: 'France' }], parentEl: el }); 
5 
6button = inputEx.cn('button', null, null, "SetValue with 'us'"); 
7el.appendChild(button); 
8 
9val = 'us'; 
10 
11YAHOO.util.Event.addListener(button, "click" ,function() { 
12   field.setValue(val); 
13   val = (val == 'fr') ? 'us' : 'fr'; 
14   button.innerHTML = "SetValue with '"+val+"'"; 
15}); 
16 
17logDiv = inputEx.cn('div', null, null, "Log :"); 
18el.appendChild(logDiv); 
19 
20field.updatedEvt.subscribe(function(e,params) { 
21    var value = params[0]; 
22    logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; 
23    logDiv.appendChild(inputEx.cn('br')); 
24}); 
view plain | print | ?

Styling RadioField

Display the choices vertically, style currently selected choice...

1new inputEx.RadioField({ 
2    label: 'Where did you learn about inputEx ?', 
3    display:'vertically',  // instead of default implicit "display:'inline'" 
4    name: 'example4', 
5    choices: ['Ajaxian','YUI blog','Other'], 
6    parentEl: 'container4' 
7}); 
8 
9// + CSS : underline selected choice 
10// 
11// <style> 
12//   .inputEx-RadioField .inputEx-selected label { text-decoration: underline; } 
13// </style> 
view plain | print | ?

allowAny option

The "allowAny" option adds a radio associated to a StringField to let the user enter any value.

1var field2 = new inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example5', choices: ['Ajaxian','YUI blog'], parentEl: 'container5', allowAny: true}); 
2field2.updatedEvt.subscribe(function(e, params) { 
3        YAHOO.util.Dom.get('container5').appendChild( inputEx.cn('div',null,null, "Updated with value: "+params[0]) ); 
4}); 
view plain | print | ?

Advanced allowAny option

More options with allowAny (separators, default value, validator, etc.)

Yes,
hours before the event
1var field, el, button1, button2, button3; 
2 
3el = YAHOO.util.Dom.get('container6'); 
4 
5field = new inputEx.RadioField({ 
6    label: 'Would you like to receive an email reminder ?', 
7    name: 'example6', 
8    display: 'vertically', 
9    choices: [{ value: '0', label: 'No' }], 
10    value: '0', // default value, also used by clear() method 
11    parentEl: 'container6', 
12    allowAny: { 
13        separators:['Yes, ',' hours before the event'], 
14        value:'3', // default value for allowAny field, not for radioField 
15        validator: function(val) { 
16            var num = parseInt(val,10); 
17            return (val === ""+num && num >= 1 && num <= 48); 
18        } 
19    }, 
20    messages: {invalid:"Hours should be between 1 and 48."}, 
21    showMsg:true, 
22    required:true 
23}); 
24 
25field.updatedEvt.subscribe(function(e, params) { 
26        el.appendChild( inputEx.cn('div',null,null, "Updated with value: "+params[0]) ); 
27}); 
28 
29button1 = inputEx.cn('button', null, null, 'setValue("6")'); 
30el.appendChild(button1);  
31YAHOO.util.Event.addListener(button1, 'click', function() { field.setValue("6"); }); 
32 
33button2 = inputEx.cn('button', null, null, 'getValue()'); 
34el.appendChild(button2);  
35YAHOO.util.Event.addListener(button2, 'click', function() { alert(field.getValue()); }); 
36 
37button3 = inputEx.cn('button', null, null, 'clear()'); 
38el.appendChild(button3);  
39YAHOO.util.Event.addListener(button3, 'click', function() { field.clear(); }); 
40 
41/* Style
42#container6 div.inputEx-StringField-wrapper input {width: 25px;}
43*/ 
view plain | print | ?

Advanced allowAny option 2

Use a custom field in allowAny

Yes,
before the event
1var field, el, button1, button2, button3; 
2 
3el = YAHOO.util.Dom.get('container6bis'); 
4 
5field = new inputEx.RadioField({ 
6    label: 'Would you like to receive an email reminder ?', 
7    name: 'example6bis', 
8    display: 'vertically', 
9    choices: [{ value: 0, label: 'No' }, { value: 1440, label: 'Yes, 1 day before the event (recommended)'}], 
10    value: 1440, // default value, also used by clear() method 
11    parentEl: el, 
12    allowAny: { 
13        field: { 
14            type: "timeinterval", 
15            unit: inputEx.TimeIntervalField.units.MINUTE, // return value in 'minutes' 
16            value: 7*24*60, // 1 week = 7 days, 
17            fields: [ 
18                {type:'integer', value:1, required:true}, 
19                { 
20                    type: 'select', 
21                    choices: [ 
22                        { value: inputEx.TimeIntervalField.units.HOUR, label: inputEx.messages.timeUnits.HOUR }, 
23                        { value: inputEx.TimeIntervalField.units.DAY, label: inputEx.messages.timeUnits.DAY }, 
24                        { value: inputEx.TimeIntervalField.units.MONTH, label: inputEx.messages.timeUnits.MONTH } 
25                    ] 
26                } 
27            ], 
28            separators:['Yes, ',false, ' before the event'] 
29        }, 
30        validator: function(val) { 
31            return (val >= 120 && val <= 43200); 
32        } 
33    }, 
34    required:true, 
35    messages: {invalid:"Reminder can be set between 2 hours and 1 month before the event"}, 
36    showMsg:true 
37}); 
38 
39field.updatedEvt.subscribe(function(e, params) { 
40        el.appendChild( inputEx.cn('div',null,null, "Updated with value: "+params[0]+" (minutes)") ); 
41}); 
view plain | print | ?

Disable RadioField

Disable the field (to disable radio inputs individually, see another example below)

1var el, field, button1, button2; 
2 
3el = YAHOO.util.Dom.get('container7'); 
4field = new inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example7', choices: ['Ajaxian','YUI blog','Other'], value:'Ajaxian', parentEl: el}); 
5 
6button1 = inputEx.cn('button', null, null, 'disable()'); 
7el.appendChild(button1);  
8YAHOO.util.Event.addListener(button1, 'click', function() { field.disable(); }); 
9 
10button2 = inputEx.cn('button', null, null, 'enable()'); 
11el.appendChild(button2);  
12YAHOO.util.Event.addListener(button2, 'click', function() { field.enable(); }); 
view plain | print | ?

addChoice

Add choices dynamically

Log :
1var el, field, button1, button2, button3, logDiv; 
2 
3el = YAHOO.util.Dom.get('container8'); 
4field = new inputEx.RadioField({name: 'example8', choices: [{ value: 'United States of America' }, { value: 'France' }], parentEl: el}); 
5 
6button1 = inputEx.cn('button', null, null, "Add 'Spain' choice (and select 'Spain')"); 
7YAHOO.util.Event.addListener(button1, "click" ,function() { 
8    field.addChoice({value:"Spain",selected:true}); 
9    button1.disabled = true; 
10}); 
11 
12button2 = inputEx.cn('button', null, null, "Add 'United Kingdom' choice (value : 'uk'), in position 1"); 
13YAHOO.util.Event.addListener(button2, "click" ,function() { 
14    field.addChoice({value:"uk",label:"United Kingdom",position:1}); 
15    button2.disabled = true; 
16}); 
17 
18button3 = inputEx.cn('button', null, null, "Add 'Sweden' choice after 'France' choice"); 
19YAHOO.util.Event.addListener(button3, "click" ,function() { 
20    field.addChoice({value:"Sweden",after:"France"}); 
21    button3.disabled = true; 
22}); 
23 
24el.appendChild(button1); 
25el.appendChild(button2); 
26el.appendChild(button3); 
27 
28logDiv = inputEx.cn('div', null, null, "Log : "); 
29el.appendChild(logDiv); 
30 
31field.updatedEvt.subscribe(function(e,params) { 
32    var value = params[0]; 
33    logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; 
34    logDiv.appendChild(inputEx.cn('br')); 
35}); 
view plain | print | ?

removeChoice

Remove choices dynamically

Log :
1var el, field, button1, button2, button3, logDiv; 
2 
3el = YAHOO.util.Dom.get('container9'); 
4field = new inputEx.RadioField({ 
5    name: 'example9', 
6    choices: [ 
7        { value: 'usa', label: 'United States of America' }, 
8        { value: 'de', label: 'Germany' }, 
9        { value: 'uk', label: 'United Kingdom' }, 
10        { value: 'fr', label: 'France' }, 
11        { value: 'se', label: 'Sweden' }, 
12        { value: 'es', label: 'Spain' } 
13    ], 
14    parentEl: el 
15}); 
16 
17button1 = inputEx.cn('button', null, null, "Remove 'Spain' choice (by label)"); 
18YAHOO.util.Event.addListener(button1, "click", function() { 
19   field.removeChoice({label:"Spain"}); 
20   button1.disabled = true; 
21}); 
22 
23button2 = inputEx.cn('button', null, null, "Remove 'United Kingdom' choice (by value)"); 
24YAHOO.util.Event.addListener(button2, "click", function() { 
25   field.removeChoice({value:"uk"}); 
26   button2.disabled = true; 
27}); 
28 
29button3 = inputEx.cn('button', null, null, "Remove 'Germany' choice (by position)"); 
30YAHOO.util.Event.addListener(button3, "click", function() { 
31   field.removeChoice({position:1}); 
32   button3.disabled = true; 
33}); 
34 
35el.appendChild(button1); 
36el.appendChild(button2); 
37el.appendChild(button3); 
38 
39logDiv = inputEx.cn('div', null, null, "Log : "); 
40el.appendChild(logDiv); 
41 
42field.updatedEvt.subscribe(function(e,params) { 
43    var value = params[0]; 
44    logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; 
45    logDiv.appendChild(inputEx.cn('br')); 
46}); 
view plain | print | ?

Hide / Show / Disable / Enable choice

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.

Log :
1var el, field, button1, button2, button3, button4, logDiv; 
2 
3el = YAHOO.util.Dom.get('container10'); 
4field = new inputEx.RadioField({name: 'example10', choices: [ { value: 'usa', label: 'United States of America' }, { value: 'fr', label: 'France' }, { value: 'es', label: 'Spain' }], parentEl: el}); 
5 
6button1 = inputEx.cn('button', null, null, "Hide choice 'France'"); el.appendChild(button1); 
7button2 = inputEx.cn('button', null, null, "Show choice 'France'"); el.appendChild(button2); 
8button3 = inputEx.cn('button', null, null, "Disable choice 'Spain'"); el.appendChild(button3); 
9button4 = inputEx.cn('button', null, null, "Enable choice 'Spain'"); el.appendChild(button4); 
10 
11logDiv = inputEx.cn('div', null, null, "Log :"); 
12el.appendChild(logDiv); 
13 
14field.updatedEvt.subscribe(function(e,params) { 
15    var value = params[0]; 
16    logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; 
17    logDiv.appendChild(inputEx.cn('br')); 
18}); 
19 
20 
21YAHOO.util.Event.addListener(button1, "click" ,function() { 
22     
23    field.hideChoice({value:'fr'}); 
24     
25    logDiv.innerHTML += "[INFO] Hide choice 'France' (current value : "+field.getValue()+")"; 
26    logDiv.appendChild(inputEx.cn('br')); 
27}); 
28 
29YAHOO.util.Event.addListener(button2, "click" ,function() { 
30     
31    field.showChoice({value:'fr'}); 
32     
33    logDiv.innerHTML += "[INFO] Show choice 'France' (current value : "+field.getValue()+")"; 
34    logDiv.appendChild(inputEx.cn('br')); 
35}); 
36 
37YAHOO.util.Event.addListener(button3, "click" ,function() { 
38     
39    field.disableChoice({label:'Spain'}); 
40     
41    logDiv.innerHTML += "[INFO] Disable choice 'Spain' (current value : "+field.getValue()+")"; 
42    logDiv.appendChild(inputEx.cn('br')); 
43}); 
44 
45YAHOO.util.Event.addListener(button4, "click" ,function() { 
46     
47    field.enableChoice({label:'Spain'}); 
48     
49    logDiv.innerHTML += "[INFO] Enable choice 'Spain' (current value : "+field.getValue()+")"; 
50    logDiv.appendChild(inputEx.cn('br')); 
51}); 
view plain | print | ?