inputEx - RadioField Usage

Basic RadioField creation

Use the following code to create a basic inputEx RadioField.

new YAHOO.inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example1', choices: ['Ajaxian','YUI blog','other'], parentEl: 'container1'});

allowAny option

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

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

Styling RadioField

Display the choices vertically. (add an id to the field and set "float" style to "none")

new YAHOO.inputEx.RadioField({label: 'Where did you learn about inputEx ?', name: 'example3', choices: ['Ajaxian','YUI blog','other'], parentEl: 'container3', id: 'verticalChoiceField'}); /* Style */ #verticalChoiceField div.inputEx-RadioField-choice { float: none; }

Test more options

Values different from choices, required field, etc...

var field4 = new YAHOO.inputEx.RadioField({label: "What's your favorite programming language ?", name: 'example4', choices: ['Ruby','C#',"PHP"], values: ['ruby','c_sharp','php'], allowAny: true, parentEl: 'container4', showMsg:true, required:true}); field4.updatedEvt.subscribe(function(e, params) { YAHOO.util.Dom.get('container4').appendChild( YAHOO.inputEx.cn('div',null,null, "Updated with value: "+params[0]) ); }); var exampleDiv = YAHOO.util.Dom.get('container4'); var button1 = inputEx.cn('button', null, null, 'setValue()'); exampleDiv.appendChild(button1); YAHOO.util.Event.addListener(button1, 'click', function() { field4.setValue("Javascript"); }); var button2 = inputEx.cn('button', null, null, 'getValue()'); exampleDiv.appendChild(button2); YAHOO.util.Event.addListener(button2, 'click', function() { alert(field4.getValue()); });

Advanced allowAny option

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

var field5 = new YAHOO.inputEx.RadioField({ label: 'Would you like to receive an email reminder ?', name: 'example5', choices: ['No'], values: ['0'], parentEl: 'container5', 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 }); field5.updatedEvt.subscribe(function(e, params) { YAHOO.util.Dom.get('container5').appendChild( YAHOO.inputEx.cn('div',null,null, "Updated with value: "+params[0]) ); }); /* Style */ #container5 div.inputEx-StringField-wrapper input {width: 25px;} #container5 div.inputEx-RadioField-choice {float: none;}