Change Google Sheet data based on user selection in Google Site (Web App)

Question

I am making a google site which shows a drop down based on data coming from a Google Sheet. It works.

As next step, I want that when the user select a drop down choice from the list, the value which is selected is written in Google Sheet cell (in the example below, the selected value will be written in Sheet: "Dashboard", cell: B92).

For example, assume that the drop down list has the following values coming from the Sheet: "Item 1", "Item 2", "Item 3".

When the user select "Item 1" from the web site, the script should write "Item 1" in Google sheet cell B92. Similarly, if the user select "Item 2", the script will set "Item 2" in cell B92.

I tried with the code below, but I think something is wrong with:

• fetch in the HTML file
• doPost(e) because I am not sure how to pass the parameter

(I removed the entire code to focus on the pieces which are incorrect. I can add it back if needed)

function doPost(e) {
          var ss=SpreadsheetApp.openById('XXXXXXXX');
          var sh=ss.getSheetByName('Dashboard');
          sh.getRange(92,2).setValues(e.parameter);

        }

HTML file:

<script type="text/javascript">
      var lastIndex = "";
      const url = "https://script.google.com/a/google.com/macros/s/AKfycbxHX7cthji076OrqfY9ZpGa7jNDxKHUMf_ib7Ekmoo0Ir5DQF1Y/exec";
    function listQ(){
        var e = document.getElementById("sel1");
        if(e.selectedIndex > 0){
                lastIndex = e.selectedIndex;
                console.log(lastIndex);
                fetch(url, {
                    method: "POST"
                    , body: lastIndex
                }).then(function (response) {
                    return response.json()
                }).then(function (data) {
                    console.log(data);            
            })
         }
    }

document.getElementById("sel1").addEventListener("click",listQ);

Answer 1

I believe your goal as follows.

• You want to put the selected value at select tab in HTML to the cell "B92" in the sheet Dashboard.
• You want to send the value to Web Apps with the POST method.

For this, how about this answer?

Modification points:

• At Google Apps Script side,
  • When you want to use the POST method, the request body is included in e.postData.contents.
  • sh.getRange(92,2).setValues(e.parameter); is not correct. In this case, please use setValue/
  • In your doPost, no values are returned. In this case, an error occurs at Javascript side when the value is sent.
• At Javascript side,
  • lastIndex is returned. In the case of When the user select "Item 1" from the web site, the script should write "Item 1" in Google sheet cell B92. Similarly, if the user select "Item 2", the script will set "Item 2" in cell B92., the selected value is required to be retrieved and returned.

When above modification is reflected to your script, it becomes as follows.

Modified script:

Google Apps Script side:

function doPost(e) {
  var value = JSON.parse(e.postData.contents).value;
  var ss = SpreadsheetApp.openById('XXXXXXXX');
  var sh = ss.getSheetByName('Dashboard');
  sh.getRange(92, 2).setValue(value);
  return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);
}

HTML and Javascript side:

From your question, I cannot understand about your options. So I used a sample options like below. Please replace this for your actual situation.

<select id="sel1">
  <option value="sample1">sample1</option>
  <option value="sample2">sample2</option>
  <option value="sample3">sample3</option>
</select>


<script>
  function listQ() {
    const index = this.selectedIndex;
    if (index > 0) {
      const e = document.getElementById("sel1");
      const value = e.options[index].value;
      const url = "https://script.google.com/macros/s/###/exec";  // Please replace this for your Web Apps.
      fetch(url, {
        method: "POST",
        body: JSON.stringify({index: index, value: value}),
      })
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        console.log(data);
      })
    }
  } 

  document.getElementById("sel1").addEventListener("change", listQ);
</script>

• In this modification, when the options of sample2 and sample3 are selected, the value is sent to Web Apps. And then, at the Web Apps, the retrieved value is put to the cell "B92".

Note:

• When you modified the script of Web Apps, please redeploy it as new version. By this, the latest script is reflected to Web Apps. Please be careful this.

References:

• Web Apps
• Taking advantage of Web Apps with Google Apps Script

Answer 2

In addition to Tanaike answer, I am posting an alternative using google.script.run which avoid the CORS issue which some users may experience.

The complete explanation is here: CORS block: WebApp POST to Sheet

in gs file:

function yourServerSideFunc(body) {
  var value = body["value"];
  var ss = SpreadsheetApp.openById('1ROvDcIQ9JCGxzLvCvTKIqSor576Uj9ZJv-n6hQ762XB');
  var sh = ss.getSheetByName('Dashboard');
  sh.getRange(92, 2).setValue(value);
  return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);  
}

and in HTML:

function listQ() {
  const index = this.selectedIndex;
  if (index > 0) {
    const e = document.getElementById("sel1");
    const value = e.options[index].value;
    const body = { index: index, value: value };
    google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body);
  }
}
document.getElementById("sel1").addEventListener("change",listQ);

function yourCallBack(response) {
}