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.

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

    Modification points:

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

    Note:

    References: