Strange behaviour when using radioButton()

Question

The code below is giving me some headache. It's a very simple application that has 2 radio buttons and a button. The idea of this app is to record in the spreadsheet the value of the radio button selected. Now, if I select the 1st radio button("one") and then change to the second radio button("two") and then back to "one" and click the "Record" button, the app will record 3 times in the spreadsheet. It kind of accumulates the selections.

Don't know if I made myself clear, but here are the steps to simulate the issue:

1- Run the application below; 2- Select radio button "one", then "two" and the "one" again and press the "Record" button; 3- Check the spreadsheet for duplicated values.

The more you keep clicking the radio buttons, the more duplicated values will be recorded.

Any idea why this happens and how can I overcome this issue?

function myAppFunction() {
var mydoc = SpreadsheetApp.getActiveSpreadsheet();
var app = UiApp.createApplication().setTitle('Here is the title bar'); 
var panel = app.createVerticalPanel().setId('panel');

//using setName will give you the ability to get the value  
var myRadio1 = app.createRadioButton("group","one").setName('myRadio1').setId('myRadio1');
var myRadio2 = app.createRadioButton("group","two").setName('myRadio2').setId('myRadio2');
var button = app.createButton("Gravar").setId("record_");
//A label will be used to give feedback on the value of the checkBox 
var infoLabel = app.createLabel('Check the box and click submit').setId('infoLabel');

//handlers 
var handler = app.createServerChangeHandler('radio1');
handler.addCallbackElement(panel);  
myRadio1.addClickHandler(handler);

var handler2 = app.createServerChangeHandler('radio2');
handler2.addCallbackElement(panel);  
myRadio2.addClickHandler(handler2);


//put everything in the UI 
panel.add(myRadio1);      
panel.add(myRadio2); 
panel.add(button);
panel.add(infoLabel);

app.add(panel);  
mydoc.show(app);  
}
function radio1(e){
var app = UiApp.getActiveApplication(); 
app.getElementById('myRadio2').setValue(false);
app.getElementById('infoLabel').setText('one is: ' + e.parameter.myRadio1);
var panel = app.getElementById("panel");
var button = app.getElementById("gravar");
var handler = app.createServerClickHandler("record_");
handler.addCallbackElement(panel);
button.addClickHandler(handler);
return app;
}

function radio2(e){
var app = UiApp.getActiveApplication(); 
app.getElementById('myRadio1').setValue(false);
app.getElementById('infoLabel').setText('two is: ' + e.parameter.myRadio2); 
var button = app.getElementById("gravar");
var handler = app.createServerClickHandler("gravar_");
handler.addCallbackElement(app.getElementById("panel"));
button.addClickHandler(handler);

return app;
}
function record_(e) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Sheet1");
var lastRow = sheet.getLastRow();
var freeCell = sheet.getRange("A1").offset(lastRow, 0);
freeCell.setValue(e.parameter.myRadio1);
}

Answer 1

I do not understand the behavior of your code, but I think it is not appropriate and far too complex.

First you create two radio buttons setting their name to "group", which is right, but immediately after the creation you overwrite their names respectively with "myRadio1" and with "myRadio1", which is not buggy but not useful as it forces you to add server change handler to each radio button.

If you leave the two radio buttons with the same name "group", they will automatically toggle one to each other when you click on them. Thus you will not require to add click handler to them.

Because they share the same name: "group", you will be able to access their state ("false" if the first radio button is selected, "true" if the second is selected) using "e.parameter.group" parameter in the callback function of the click handler of the validate button.

Here is your code simplified and fixed:

function myAppFunction() {
  var mydoc = SpreadsheetApp.getActiveSpreadsheet();
  var app = UiApp.createApplication().setTitle('Here is the title bar'); 
  var panel = app.createVerticalPanel().setId('panel');

  // Create the radio buttons and add it to the panel
  var myRadio1 = app.createRadioButton("group","one");
  var myRadio2 = app.createRadioButton("group","two");
  panel.add(myRadio1);      
  panel.add(myRadio2); 

  // Create the apply button, add click handler and add it to the panel
  var button = app.createButton("Gravar").addClickHandler(app.createServerHandler("record_").addCallbackElement(panel));
  panel.add(button);

  // Create the label and add it to panel
  var infoLabel = app.createLabel('Check the box and click submit');
  panel.add(infoLabel);

  // Add the panel in the GUI
  app.add(panel);

  // Show the GUI in the spreadsheet
  mydoc.show(app);
}

function record_(e) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Sheet1");
  var lastRow = sheet.getLastRow();
  var freeCell = sheet.getRange("A1").offset(lastRow, 0);
  freeCell.setValue(e.parameter.group);
}

Answer 2

Radio buttons must have the same name to work in normal exclusive OR mode, if you refer to the doc you'll notice that this is required when using in a standard panel. Here is a simple example :

function radiotest() {
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel();
  var radioValue = app.createTextBox();
      radioValue.setId("radioValue").setName("radioValue").setVisible(false);
  for(var i = 1; i < 10; i++){
    var name = 'choice '+i;
    var handler = app.createClientHandler().forTargets(radioValue).setText(name);
    panel.add(app.createRadioButton('radio',name).addValueChangeHandler(handler));
  }
  panel.add(radioValue);
  var getit=app.createButton("Valide").setId("val");
  panel.add(getit)                   
  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 ss = SpreadsheetApp.getActiveSpreadsheet();
  var RadioButton = e.parameter.radioValue;               
  sh.getRange('A1').setValue(RadioButton);
  var app = UiApp.getActiveApplication();
  return app;
}​