Question

我正在尝试在容器绑定的侧边栏中提交html表单的输入结果，并将它们复制到google工作表。我回顾了这个网站以及其他网站（https://www.packtpub.com/mapt/book/web_development/9781785882517/4/ch04lvl1sec48/submitting-form-using-google-script-api-method）中的一些代码示例，但是，也许是因为我是html / javascript / gas的新手，发现它们令人困惑，难以理解我写的代码不工作，我无法弄清楚为什么。

简而言之，我想将'formcommenttext'输入文本框中输入的值传递给名为'postCommentToSheet'的Google Apps脚本函数，我希望能够获得用户输入的值（最终）把它写到谷歌表。

有什么建议吗？

这是我的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>

我还将以下代码片段包含在我的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]);

}

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

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

Answer 2

您目前不需要postData()功能，但如果您想在调用将注释添加到工作表之前进行一些处理，则可以调用它而不是google.script.run.postCommentToSheet()。

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

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

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

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

将表单结果提交到Google脚本？

2 个答案: