CODEWITHSUNDEEP
javascriptextjs
Matty
Matty

Reputation: 1981

Ext RadioGroup - How to Access the value of selected radio button?

I am having some difficulty accessing the value of the selected radio button in a radiogroup. I've attempted a number of different approaches based upon discussion in other posts on the forum and around the web. Unfortunately haven't been lucky (or skilled) enough to get it working. Based on the following FormPanel config I was hoping someone could show me how to get the value of the selected radio in the group 'mainPhone'.

Thanks!

Wanted to update to indicate that I was able to get a response from stackoverflow while the EXT-JS forums didn't provide me with any help. Way to go stackoverflow!

Matt

function createForm(elem) {
var myForm2 = new Ext.form.FormPanel({
  renderTo:elem,
  width:425,
  frame:true,
  style:"margin: 10px auto 10px auto;",
  items: [{xtype:'fieldset',
            title: 'Contact Info',
            autoHeight:true,
            items :[new Ext.form.RadioGroup({
                        fieldLabel: 'Main Phone',
                        vertical: false,
                        id:"mainPhone",
                        items: [
                            {boxLabel: 'Home', name: 'id-1', inputValue: 'H', checked:true},
                            {boxLabel: 'Work', name: 'id-1', inputValue: 'W'},
                            {boxLabel: 'Other', name: 'id-1', inputValue: 'O'}
                        ]    

                    }),
                  new Ext.form.TextField({
                    id:"frm_CreateCustomerHomePhone",
                    fieldLabel:"Home Phone",
                    width:275,
                    allowBlank:true
                 }),
                 new Ext.form.TextField({
                    id:"frm_CreateCustomerWorkPhone",
                    fieldLabel:"Work Phone",
                    width:275,
                    allowBlank:true
                 })
                  new Ext.form.TextField({
                    id:"frm_CreateCustomerOtherPhone",
                    fieldLabel:"Other Phone",
                    width:275,
                    allowBlank:true
                 })
    ]}]});              
}

Upvotes: 7

Views: 50315

Answers (8)

Cindy
Cindy

Reputation:

The method getValue() on the radio group itself will return the object that is checked, if any, otherwise, it returns undefined.

(by the way I set value instead of inputValue for my boxes, although I don't think it makes much of a difference, maybe it does on the last "getValue"), I'm using extjs 3.0, and my radiogroup configuration is slightly different than yours.

var checkedItem = Ext.getCmp('mainPhone').getValue();

if (checkedItem == undefined) return '';

return checkedItem.getGroupValue();
// The getGroupValue will return the value of the checked option in a group,
// unfortunately, it only seems to work on the items and not the radiogroup 
// itself

Upvotes: 5

Raza Ahmed
Raza Ahmed

Reputation: 2751

if you are using MVC, probably you try to ignore using ids. so one of the solution then to get value in change event is 

change : function(radioButton, newValue, oldValue, eOpts){
        console.log(newValue.individual);
}

Upvotes: 0

asle
asle

Reputation: 165

The answer from Lo-Tan works for me. I am also using extjs 2.2.1 Like me you may not have a ext.Form.Formpanel but just a searchbox and a radiogroup. I use this code to get the value from the radio group.

My radio group:

var begrens_sok = new Ext.form.RadioGroup({  
fieldLabel: 'Begrens søket',  
columns: 1,
name: 'sokspecs',
id:'sokspecs',
 items: [  
      {boxLabel: 'Scientific name', name: 'sokspec', inputVale:'SN'},
      {boxLabel: 'Norsk navngruppe', name: 'sokspec', inputValue:'NNG'},
      {boxLabel: 'Norsk navnart', name: 'sokspec', inputValue:'NNA'},
      {boxLabel: 'Prosjektsøk', name: 'sokspec', inputValue:'PROJ'},
      {boxLabel: 'Fritekst søk', name: 'sokspec', inputValue:'FSOK', 'id':'sokspec', checked: true}
 ]  
    });

To get the checked radiobutton value I use this:

var radiovalue=  Ext.getCmp('sokspecs').items.get(0).getGroupValue()

Upvotes: 3

Ian
Ian

Reputation: 7558

Not sure if this is too simple but I was able to access the value (in Ext 3.3.1) using the 'inputValue' property.

var radio = ...;
var value = radio.inputValue;

Upvotes: 0

Lo-Tan
Lo-Tan

Reputation:

I know this question is old, but I'm adding this for reference. The following snipit is valid for Ext 2.2 afaik.

Ext.getCmp("mainPhone").items.get(0).getGroupValue();

Upvotes: 3

Joshua
Joshua

Reputation: 1963

if you want to get the specific value of the field, use

myForm2.getForm().findField('id-1').getGroupValue();

Upvotes: 1

Reputation: 

function get_radio_value()
{
    for( var i=0; i < document.myForm.mainPhone.length; i++ )
    {
       if( document.myForm.mainPhone[ i ].checked )
       {
           return document.myForm.mainPhone[ i ].value;
       }
    }
}

Upvotes: -2

Adam Bellaire
Adam Bellaire

Reputation: 110429

This is something of a wild guess, but how about this:

myForm2.getForm().getValues()['id-1'];

Upvotes: 10

Related Questions