Html 提交表单结果到谷歌脚本？_Html_Google Apps Script

Html 提交表单结果到谷歌脚本？

html google-apps-script

Html 提交表单结果到谷歌脚本？,html,google-apps-script,Html,Google Apps Script,我正试图将html表单的输入结果提交到一个绑定到容器的侧边栏中，并将其复制到google工作表中。我回顾了这个站点和其他站点（）中的一些代码示例，但可能是因为我对html/javascript/gas完全是新手，发现它们令人困惑，难以理解，以至于我编写的代码无法工作，我也不知道为什么简言之，我想将在“formcommenttext”输入文本框中输入的值传递给我的名为“postCommentToSheet”的Google应用程序脚本函数，在这里我希望能够获得用户输入的值，并（最终）将其写入Goo

我正试图将html表单的输入结果提交到一个绑定到容器的侧边栏中，并将其复制到google工作表中。我回顾了这个站点和其他站点（）中的一些代码示例，但可能是因为我对html/javascript/gas完全是新手，发现它们令人困惑，难以理解，以至于我编写的代码无法工作，我也不知道为什么

简言之，我想将在“formcommenttext”输入文本框中输入的值传递给我的名为“postCommentToSheet”的Google应用程序脚本函数，在这里我希望能够获得用户输入的值，并（最终）将其写入Google工作表

有什么建议吗

以下是我的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>

这是我的.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]);

}

以下是它的工作原理：

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

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

您目前不需要

postData（）

函数，但可以调用它，而不是

google.script.run.postCommentToSheet（）

如果您想在调用之前进行一些处理，请将注释添加到工作表中

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

还包括一个自定义菜单，以便可以从工作表和中打开侧栏

Index.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>

doGet函数将创建一个独立的webapp，而不是一个边栏UI。谢谢，忘了它是一个边栏。非常感谢你，迭戈。这完全有道理，您的代码示例工作得非常出色。我也非常感谢您向我介绍google css脚本资源。

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

<!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>

// 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]);
}