将表单结果提交到谷歌脚本？答案

【问题标题】：Submit form results to google script?将表单结果提交到谷歌脚本？
【发布时间】：2018-04-08 08:26:07
【问题描述】：

我正在尝试在容器绑定的侧边栏中提交 html 表单的输入结果，并将它们复制到谷歌表格。我查看了该站点以及其他站点 (https://www.packtpub.com/mapt/book/web_development/9781785882517/4/ch04lvl1sec48/submitting-form-using-google-script-api-method) 中的一些代码示例，但也许因为我是 html/javascript/gas 的新手，发现它们令人困惑且难以理解，因此我编写的代码不是t工作，我不知道为什么。

简而言之，我想将在“formcommenttext”输入文本框中输入的值传递给我的 Google Apps 脚本函数“postCommentToSheet”，我希望我可以在其中获取用户输入的值并且（最终) 将其写入谷歌表格。

有什么建议吗？

这是我的 html 代码：

  <!-- input control to add comment -->
  <form id="addCommentForm">
  <fieldset>
  <legend>Add your comment:</legend>
  <br>
  <input type="text" name="formcommenttext" value=""><br>
  <input type="submit" value="Add" onclick="google.script.run.postCommentToSheet(this.parentNode);">
  <input type="reset" value="Cancel">
  </fieldset>
  </form>

我还将以下代码 sn-p 包含到我的 html 表单的脚本部分中（如其他地方所建议的那样），尽管我不清楚它的作用以及如何对其进行编辑以满足我的需要。

  function postData(form){
    google.script.run
      .withSuccessHandler(callback)
      .withFailureHandler(callback)
      .postFormDataToSheet(form);
  }

这是我的 .gs 代码：

function postCommentToSheet(formObject) {
  //read formcommenttext from add comment form: 
  //https://www.packtpub.com/mapt/book/web_development/9781785882517/4/ch04lvl1sec48/submitting-form-using-google-script-api-method

  var result = GLOBAL_UI.alert(formObject.formcommenttext.value)

  //get comments data sheet
  var ss = GLOBAL_DataFile.getSheetByName("Comments");

  ss.appendRow([formObject.formcommenttext]);

}

【问题讨论】：

标签： html google-apps-script

【解决方案1】：

这是它的工作原理：

  <form id="addCommentForm">
  <fieldset>
  <legend>Add your comment:</legend>
  <br>
  <input type="text" name="formcommenttext" value=""><br>
  <input type="submit" value="Add" onclick="google.script.run.postCommentToSheet(this.form);">
  <input type="reset" value="Cancel">
  </fieldset>
  </form>

和 .gs 部分：

function sidebar(){
  var sb =  HtmlService
    .createHtmlOutputFromFile('index');
  SpreadsheetApp.getUi().showSidebar(sb);
}

function postCommentToSheet(form){
  Logger.log(JSON.stringify(form));
  var ss = SpreadsheetApp.getActiveSheet();
  ss.appendRow([form.formcommenttext]);
}

我添加了一个日志来检查表单答案的内容，并进行了一些简化以使其在这个小示例中起作用。

【讨论】：

【解决方案2】：

您目前不需要postData() 函数，但您可以调用它而不是google.script.run.postCommentToSheet()，以防您想在调用将评论添加到工作表之前进行一些处理。

例如，您可以运行验证以防止用户提交空白评论。我在示例中包含了这个确切的功能作为演示。

还包括一个自定义菜单，以便可以从工作表和CSS package for add-ons 中打开侧边栏。

索引.html：

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <!-- (OPTIONAL) Make your sidebar look consistent with Google Sheets with the below CSS https://developers.google.com/apps-script/add-ons/css -->
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>

<body>
  <!-- input control to add comment -->
  <form id="addCommentForm" onsubmit=checkData(this)>
    <fieldset>
      <legend>Add your comment:</legend>
      <br>
      <input type="text" name="formcommenttext" value="">
      <br>
      <input type="submit" value="Add">
      <input type="reset" value="Cancel">
    </fieldset>
  </form>

  <script>
    function checkData(form) {
      if (form.formcommenttext.value != "") {
        google.script.run.postCommentToSheet(form);
      }
    }
  </script>
</body>

</html>

代码.gs：

// Create a custom menu to open your sidebar
function onOpen() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var menuEntries = [];
  menuEntries.push({name: "Open Sidebar", functionName: "openSidebar"});
  ss.addMenu("My Custom Menu", menuEntries);
 }

// Open the sidebar
function openSidebar() {
  var sidebar =  HtmlService.createHtmlOutputFromFile("Index");
  SpreadsheetApp.getUi().showSidebar(sidebar);
}

function postCommentToSheet(formObject) {
  var ss = SpreadsheetApp.getActive();
  var sheet = ss.getSheetByName("Comments"); // Almost ALWAYS better to explicitly define which sheet to write to
  sheet.appendRow([formObject.formcommenttext]);
}

【讨论】：

doGet 函数将创建一个独立的 web 应用程序，而不是侧边栏 UI。
谢谢，忘记是侧边栏了。
非常感谢，迭戈。这完全有道理，您的代码示例就像一个魅力。
我也很感谢您指点我的 google css 脚本资源。