How do I send information back from HTML to the server side

Question

I am sending some text

from the server to HTML side
retrieving it on the HTML side via onload
trying to send it back via a google.script.run call and display on console.log

steps 1. and 2. work fine. I am not able see the information on the server side. here is the code.

script sending the information:

function sendItem() {
  var form = HtmlService.createHtmlOutputFromFile('test');
  var data = "sometext";
    var strAppend = "<div id='id_for_div' style='display:none;'>" + data + "</div>";
    form.append(strAppend);

  var ui = SpreadsheetApp.getUi();
  ui.showSidebar(form);
}

HTML form receiving the information

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function getDataForHtml() {
        var id = "id_for_div";
        var action = document.getElementById(id).innerHTML;
        var element = document.getElementById("myid");
        element.innerHTML = action;
      }
    </script>
  </head>
  
  <body onload="getDataForHtml();">
    <div>
      <br><p id="myid">some text</p>  <!-- verifying information in myId -->
      <button onclick="sendResponse()">send response</button>
    </div>
  </body>
</html>
<script>
function sendResponse(action){
   var action = document.getElementById("myid").value;
   google.script.run.receiveItem();
  }
</script>

script receiving information from HTML

function receiveItem(sometext) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  sheet.getRange(10,2).setValue(sometext);
}

Try google.script.run: https://developers.google.com/apps-script/guides/html/communication — Cooper, Jun 30 '21 at 21:32

score 0 · Answer 1 · answered Jun 30 '21 at 21:52

To pass data from interface created using the HTML Service, usually referred as "client-side", we could use google.script.run to call a function from the "server-side". To pass data from the client-side to the server side, add the data as a parameter of the server side function.

Be aware that there are some limitations like Date objects can't passed as Date object, you have to convert to a supported data type i.e. string or number.

Resources

https://developers.google.com/apps-script/guides/html/communication

score 0 · Answer 2 · answered Jul 01 '21 at 03:03

I was able to resolve the problem. I Was using the wrong document ID. Should have been

var action = document.getElementById("id_for_div").value;

instead of

var action = document.getElementById("myid").value;

thanks to everyone who looked at this problem.

How do I send information back from HTML to the server side

2 Answers2