How to know which Radio Button is selected?

Question

I have 3 Radio buttons in my Ui in the same Radio group. They are,

var rbutton1 = app.createRadioButton('dist','5 miles');

var rbutton2 = app.createRadioButton('dist','10 miles');

var rbutton3 = app.createRadioButton('dist','25 miles');

In the event handler function, the variable, e.parameter.dist gives true or false just based on whether rbutton3 (the last radio button) is checked or not. Is there any way to determine what radio button is selected exactly?

Answer 1

I use:

eventData.parameter.source

and pick up the change using addClickHandler.

You need to store this somewhere

Answer 2

in the meantime I came up with a workaround to set the radiobutton as well, in this example I use a listBox but any other data could be used.

Here is the complete code : (to test in a spreadsheet container)

function radiotest() {
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel();
  var radioValue = app.createTextBox().setId('radioValue');
      radioValue.setId("radioValue").setName("radioValue");
  var listhandler = app.createServerHandler('listhandler').addCallbackElement(panel); 
  var list = app.createListBox().addChangeHandler(listhandler).setName('list');    
  for(var i = 1; i < 10; i++){
    var name = 'choice '+i;
    list.addItem('Activate '+name,name)
    var handler = app.createClientHandler().forTargets(radioValue).setText(name);
    panel.add(app.createRadioButton('radioButtonGroup',name).addValueChangeHandler(handler).setId(name));
  }
  panel.add(radioValue);
  var getit=app.createButton("Valide").setId("val");
  panel.add(getit).add(list)                   
  var handler = app.createServerHandler("valide")
  handler.addCallbackElement(panel)
  getit.addClickHandler(handler);
  app.add(panel);
SpreadsheetApp.getActiveSpreadsheet().show(app);// show app 
}
//
function valide(e){ ;// This function is called when key "validate" is pressed 
  var sh = SpreadsheetApp.getActiveSheet();
  var RadioButton = e.parameter.radioValue;               
  sh.getRange('A1').setValue(RadioButton);
  var app = UiApp.getActiveApplication();
  return app;
}​

function listhandler(e){ ;// This function is called when listBox is changed
  var sh = SpreadsheetApp.getActiveSheet();
  var app = UiApp.getActiveApplication();
  var listvalue = e.parameter.list
  var radioValue = app.getElementById('radioValue').setValue(listvalue)
  sh.getRange('A2').setValue(listvalue);
  var radiobutton = app.getElementById(listvalue)
  radiobutton.setValue(true)
return app;
}​

the selected radioButton values comes in the textBox value and the listBox allows to select which radioButton is activated... it shows up like this

There is also another approach, as stated by eddyparkinson that is to use the e.parameter.source but this works only if the handler is assigned directly to the radioButton and not using a 'submit' button. In many case it can be used and makes the code a(little) bit lighter. Here is a test of this code

function radiotest2() {
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel();
  var listhandler = app.createServerHandler('listhandler2').addCallbackElement(panel); 
  var list = app.createListBox().addChangeHandler(listhandler).setName('list');    
  var handler = app.createServerHandler("valide2")
  handler.addCallbackElement(panel)
  for(var i = 1; i < 10; i++){
    var name = 'choice '+i;
    list.addItem('Activate '+name,name)
    panel.add(app.createRadioButton('radioButtonGroup',name).setId(name).addClickHandler(handler));
  }
  panel.add(list)                   
  app.add(panel);
SpreadsheetApp.getActiveSpreadsheet().show(app);// show app 
}


function valide2(e){ ;// This function is called when a radioButton is selected
  var sh = SpreadsheetApp.getActiveSheet();
  var source = e.parameter.source;
  var radioValue = '';
  if(source.match('choice')=='choice'){radioValue=source}
  sh.getRange('A1').setValue(radioValue);
  var app = UiApp.getActiveApplication();
  return app;
}​

function listhandler2(e){ ;// This function is called when listBox is changed
  var sh = SpreadsheetApp.getActiveSheet();
  var app = UiApp.getActiveApplication();
  var listvalue = e.parameter.list
  sh.getRange('A2').setValue(listvalue);
  var radiobutton = app.getElementById(listvalue)
  radiobutton.setValue(true)
return app;
}​

Answer 3

The only way the make radio buttons group work like this (as intended by design) is by using them in a FormPanel and looking the name (in your case "dist") on a doPost from a submit action of the form.

There's some workarounds though, using the new client handlers that make it radio buttons usage on any panel roughly the same as on the from. Please take a look at this issue on the tracker. You may want to star this issue as well, to keep track of updates and kind of vote for it.

Answer 4

Are these buttons suppose to be in an exclusive OR mode. If so, they need to have the same name. Look at Serge's answer for a detailed explanation and example code.