# inputEx - RadioField Usage

## Basic RadioField creation

Use the following code to create a basic inputEx RadioField.

new 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' });

## Differentiate choices' labels and values

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

new 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' });

## Updated event

How to listen to the updated event :

var el, field, button, val, logDiv; el = YAHOO.util.Dom.get('container3'); field = new 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'; YAHOO.util.Event.addListener(button, "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.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv.appendChild(inputEx.cn('br')); });

## Styling RadioField

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

new 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 // // <style> // .inputEx-RadioField .inputEx-selected label { text-decoration: underline; } // </style>

## allowAny option

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

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

## Advanced allowAny option

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

var field, el, button1, button2, button3; el = YAHOO.util.Dom.get('container6'); field = new 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.updatedEvt.subscribe(function(e, params) { el.appendChild( inputEx.cn('div',null,null, "Updated with value: "+params[0]) ); }); button1 = inputEx.cn('button', null, null, 'setValue("6")'); el.appendChild(button1); YAHOO.util.Event.addListener(button1, 'click', function() { field.setValue("6"); }); button2 = inputEx.cn('button', null, null, 'getValue()'); el.appendChild(button2); YAHOO.util.Event.addListener(button2, 'click', function() { alert(field.getValue()); }); button3 = inputEx.cn('button', null, null, 'clear()'); el.appendChild(button3); YAHOO.util.Event.addListener(button3, 'click', function() { field.clear(); }); /* Style #container6 div.inputEx-StringField-wrapper input {width: 25px;} */

## Advanced allowAny option 2

Use a custom field in allowAny

var field, el, button1, button2, button3; el = YAHOO.util.Dom.get('container6bis'); field = new inputEx.RadioField({ label: 'Would you like to receive an email reminder ?', name: 'example6', 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.updatedEvt.subscribe(function(e, params) { el.appendChild( inputEx.cn('div',null,null, "Updated with value: "+params[0]+" (minutes)") ); });

## Disable RadioField

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

var el, field, button1, button2; el = YAHOO.util.Dom.get('container7'); field = new inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example7', choices: ['Ajaxian','YUI blog','Other'], value:'Ajaxian', parentEl: el}); button1 = inputEx.cn('button', null, null, 'disable()'); el.appendChild(button1); YAHOO.util.Event.addListener(button1, 'click', function() { field.disable(); }); button2 = inputEx.cn('button', null, null, 'enable()'); el.appendChild(button2); YAHOO.util.Event.addListener(button2, 'click', function() { field.enable(); });

## addChoice

Add choices dynamically

var el, field, button1, button2, button3, logDiv; el = YAHOO.util.Dom.get('container8'); field = new inputEx.RadioField({name: 'example8', choices: [{ value: 'United States of America' }, { value: 'France' }], parentEl: el}); button1 = inputEx.cn('button', null, null, "Add 'Spain' choice (and select 'Spain')"); YAHOO.util.Event.addListener(button1, "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"); YAHOO.util.Event.addListener(button2, "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"); YAHOO.util.Event.addListener(button3, "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.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv.appendChild(inputEx.cn('br')); });

## removeChoice

Remove choices dynamically

var el, field, button1, button2, button3, logDiv; el = YAHOO.util.Dom.get('container9'); field = new 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)"); YAHOO.util.Event.addListener(button1, "click", function() { field.removeChoice({label:"Spain"}); button1.disabled = true; }); button2 = inputEx.cn('button', null, null, "Remove 'United Kingdom' choice (by value)"); YAHOO.util.Event.addListener(button2, "click", function() { field.removeChoice({value:"uk"}); button2.disabled = true; }); button3 = inputEx.cn('button', null, null, "Remove 'Germany' choice (by position)"); YAHOO.util.Event.addListener(button3, "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.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv.appendChild(inputEx.cn('br')); });

## 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.

var el, field, button1, button2, button3, button4, logDiv; el = YAHOO.util.Dom.get('container10'); field = new inputEx.RadioField({name: 'example10', 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.updatedEvt.subscribe(function(e,params) { var value = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; logDiv.appendChild(inputEx.cn('br')); }); YAHOO.util.Event.addListener(button1, "click" ,function() { field.hideChoice({value:'fr'}); logDiv.innerHTML += "[INFO] Hide choice 'France' (current value : "+field.getValue()+")"; logDiv.appendChild(inputEx.cn('br')); }); YAHOO.util.Event.addListener(button2, "click" ,function() { field.showChoice({value:'fr'}); logDiv.innerHTML += "[INFO] Show choice 'France' (current value : "+field.getValue()+")"; logDiv.appendChild(inputEx.cn('br')); }); YAHOO.util.Event.addListener(button3, "click" ,function() { field.disableChoice({label:'Spain'}); logDiv.innerHTML += "[INFO] Disable choice 'Spain' (current value : "+field.getValue()+")"; logDiv.appendChild(inputEx.cn('br')); }); YAHOO.util.Event.addListener(button4, "click" ,function() { field.enableChoice({label:'Spain'}); logDiv.innerHTML += "[INFO] Enable choice 'Spain' (current value : "+field.getValue()+")"; logDiv.appendChild(inputEx.cn('br')); });