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

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;
}​