Search code examples
javascriptgoogle-apps-scriptweb-applicationsradio-buttononsubmit

How to capture radio buttons with a button using Google Apps Script?

The below sample code works fine and as expected.

Looking to capture the radio button selection (green, yellow, red) to update row D of the spreadsheet. Later, would furthermore add an iteration so that each press increments the row number so that each row can be updated through the web interface.

The index.html file:

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script>
    function clickMe() {        
        google.script.run
              .withSuccessHandler(showAlert)
              .foo();
      }
      
      function showAlert(value) {
        document.getElementById('message').innerHTML = value;
      }
  </script>
</head>

<body>
  <h2>update the color</h2>
  <div id="message" style="color:green"></div>

  <input type="radio" id="green" name="color" value="GREEN">
  <label for="green">green</label><br>
  <input type="radio" id="yellow" name="color" value="YELLOW">
  <label for="yellow">yellow</label><br>
  <input type="radio" id="red" name="color" value="RED">
  <label for="red">red</label>

  <p><button onclick="clickMe(); return false;">Click Me</button></p>


</body>

</html>

The Code.gs file:

function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('index.html')
    .setTitle("Hello World Example");
}



The code.gs file:


function foo() {
  var sheetID = "abc123";

  var sheet = SpreadsheetApp.openById(sheetID).getSheetByName("alpha");
  var values = sheet.getDataRange().getValues();
  var a = sheet.getRange(1, 1).getValue();
  var b = sheet.getRange(1, 2).getValue();
  var c = sheet.getRange(1, 3).getValue();
  var d = sheet.getRange(1, 4).getValue();
  var value = " " + a + " " + b + " " + c + " " + d;  //single row
  Logger.log(value);
  return value;
}

(Yes, it probably would make more sense to deal with an array rather than individual cells as above.)

To my understanding there are some obstacles with CRUD operations through a web interface using Google Apps Script.

see also:

https://stackoverflow.com/a/19012644/4531180

Solution

  • From Looking to capture the radio button selection (green, yellow, red) to update row D of the spreadsheet. Later, would furthermore add an iteration so that each press increments the row number so that each row can be updated through the web interface., I believe your goal is as follows.

    • When a button on HTML is clicked, you want to retrieve the checked value and append it to column "D" of "alpha" sheet.

    If my understanding is correct, how about the following modification?

    Modification points:

    • In your Javascript, the checked radio button is not retrieved.
    • In your Google Apps Script, the values of cells "A1:D1" are retrieved.

    When these points are reflected in your script, how about the following modification?

    Modified script:

    HTML & Javascript side: Index.html

    <!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script>
  function clickMe() {
    const checked = [...document.getElementsByName("color")].find(e => e.checked);
    google.script.run.withSuccessHandler(showAlert).foo(checked ? checked.value : "");
  }

  function showAlert(value) {
    document.getElementById('message').innerHTML = value;
  }
  </script>
</head>

<body>
  <h2>update the color</h2>
  <div id="message" style="color:green"></div>
  <input type="radio" id="green" name="color" value="GREEN">
  <label for="green">green</label><br>
  <input type="radio" id="yellow" name="color" value="YELLOW">
  <label for="yellow">yellow</label><br>
  <input type="radio" id="red" name="color" value="RED">
  <label for="red">red</label>
  <p><button onclick="clickMe(); return false;">Click Me</button></p>
</body>

</html>

    Google Apps Script side: code.gs

    function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('index.html')
    .setTitle("Hello World Example");
}

function foo(value) {
  var sheetID = "abc123"; // Please set your Spreadsheet ID.

  var sheet = SpreadsheetApp.openById(sheetID).getSheetByName("alpha");
  sheet.getRange(sheet.getLastRow() + 1, 4).setValue(value);
  return value;
}
    • When this modified HTML is opened and checks a radio button and clicks the button, the value of the checked radio button is sent to Google Apps Script. And, the value of the checked radio button is appended to column "D".

    Note:

    References: