Google Apps Scripts - Write User Inputs from SideBar to spreadsheet

Question

I have a sidebar in a spreadsheet with some input fields. The trouble I'm having is retrieving users response to put into the spreadsheet.

I'm using the action attribute inside of my HTML form using the following HTML:

<form action="demo_form.asp">
  Run Number: <input type="text" name = "number"><br>
  <input type="submit" value="Submit" >
</form>

How do I extract the contents from "number" after the user has clicked submit in order to paste it within the spreadsheet.

Answer 1

You must use the google.script.run client side API. That's the technical jargon. You can't "paste" a value from HTML into a spreadsheet in the same way that you can use "Copy" and "Paste".

You need to remove the action attribute from the <form action="demo_form.asp"> tag. That could cause problems.

And don't use a submit type input tag. <input type="submit" value="Submit" >

Typical HTML behavior in a form with "submit" causes an HTTPS Request to be made, which isn't what you want. You need to retrieve the value or values, or the entire form, then send those values to the server.

Even though the value is being sent from "client side" to the server, and written into the spreadsheet data, it will automatically show up in the spreadsheet. So, it's not a direct insertion of data from the side bar into the spreadsheet. It goes from the sidebar to the server, gets saved to the spreadsheet data in your Drive, then shows up in your browser in the spreadsheet.

If you send the form object to the server, you can not send anything else. If you send individual values to the server, then you can send multiple arguments. Another option is to convert an object to a string, (JSON.parse(object)) and send the string to the server.

Link to google.script.run documentation

<form id="myForm">
<input type="button" value="Submit" onmouseup="writeData()">

<script>
  window.writeData = function() {
    var formObj = document.getElementById('myForm');

    google.script.run
      myServerFunctionName(formObj);
  };
</script>

gs code

function myServerFunctionName(argForm) {
  var valueFromFormObj = argForm.nameAttributeName;

  var ss= SpreadsheetApp.
  var sh = ss.getSheetByName();

  var rng = sh.getRange();

  rng.setValue(valueFromFormObj );
}