将电子表格与应用脚本一起使用时，html 脚本参数无法传递给应用脚本答案

【问题标题】：When using spreadsheet with app script, html script parameters cannot pass to app script将电子表格与应用脚本一起使用时，html 脚本参数无法传递给应用脚本
【发布时间】：2019-06-20 03:37:00
【问题描述】：

我尝试使用应用脚本让人们用 html 页面填充 Google 电子表格。但是在我在 html 页面上输入数据后，数据没有显示在我的目标电子表格中。

在code.gs上执行函数没有问题。日志正常显示。当我使用 alert 在 html 上测试脚本时没有问题。但是，当我尝试通过 js 将参数从 html 传递到 code.gs 时。它不起作用。

code.gs：

function doGet(event) {
  // Logger.log(event);
  return HtmlService.createHtmlOutputFromFile("page");
}

function GG(name, email, link) {    
  var url = "spreadsheet url";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Data");

  ws.appendRow([new Date(), name, email, link]);
  Logger.log("GG function is work")
}

function WTF() {
  Logger.log("WTF !!!");
}

page.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <base target="_top">
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="email">Name:</label>
          <input type="text" class="form-control" id="username">
        </div>

        <br>
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="text" class="form-control" id="email">
        </div>
        <div class="form-group">
          <label for="link">Link:</label>
          <input type="url" class="form-control" id="link">
        </div>
        <button class="btn btn-primary" id="submit">Submit</button>
      </form>
    </div>

    <script>
      document.getElementById("submit").addEventListener("click",fn);

      function lol() {
        google.script.run.WTF();
      }

      function fn() {
        var uname = document.getElementById("username").value;
        var email = document.getElementById("email").value;
        var link = document.getElementById("link").value;

        google.script.run.GG(uname,email,link);
      }

    </script>
  </body>
</html>

当我更改 document.getElementById("submit").addEventListener("click",fn); 时它工作正常给document.getElementById("submit").addEventListener("click",lol);

日志按预期显示，但 GG 不起作用。工作表没有按预期添加任何数据，除非我通过应用脚本页面上的“运行 > 运行函数 > GG”执行它，它将在每个单元格上显示“未定义”的数据。

【问题讨论】：

虽然我不确定你的整个脚本，但当我看到你的脚本时，我找不到resaon 的document.getElementById("resaon").value。当fn()在这种情况下运行时，document.getElementById("resaon")变成null，并出现错误。这样，google.script.run.GG(uname,reason,link) 不起作用。比如作为一个测试用例，修改成document.getElementById("email").value怎么样？我认为这个问题可能已在您的实际脚本中进行了修改。所以我将此作为评论发布。如果我误解了您的问题，我深表歉意。
感谢您的回复。我很高兴你的问题得到了解决。当您修改了 Web Apps 的脚本并且没有使用开发者模式时，请将 Web Apps 部署为新版本。这样，最新的脚本就会反映到 Web 应用程序中。请注意这一点。
哈哈，问题依旧。那个只是我忘记更改的错字，原始代码使用“原因”而不是“电子邮件”，我只是认为电子邮件更容易让人理解，所以我在 stackoverflow 中使用电子邮件来解释这个问题。不过还是谢谢。
感谢您的回复。我很抱歉我误解了你的情况。当我看到您更新的脚本时，我认为该脚本有效。所以我认为你的问题已经解决了。当GG() 由google.script.run.GG(uname,reason,link) 运行时，如果工作表名称的url 和Data 正确，则将new Date(), name, email, link 的值附加到工作表中。这个怎么样？如果不行，请问您部署的 Web Apps 的设置？
也许是问题所在。我是应用程序脚本的新手，我没有触及任何关于设置的内容。我只需下载应用程序脚本并开始新工作表。比使用上面的代码。什么设置？在哪里配置？谢谢

标签： javascript html google-apps-script

【解决方案1】：

我对您的代码进行了更深入的研究，我认为您缺少像这样的表单作为 Web 应用程序工作的方式。您的 GG 函数正在尝试执行与使用 POST 方法提交表单并在 code.gs 中实现 doPost 方法相同的操作。

如果您使用method="POST" action="[your script url]" 编写表单并为每个控件添加name 属性：

  <form method="post" action="[your script url]">
    <div class="form-group">
      <label for="email">Name:</label>
      <input type="text" class="form-control" id="username" name="username">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="text" class="form-control" id="email" name="email">
    </div>
    <div class="form-group">
      <label for="link">Link:</label>
      <input type="url" class="form-control" id="link" name="link">
    </div>
    <button class="btn btn-primary" id="submit">Submit</button>
  </form>

code.gs中的doPost()方法可以如下：

function doPost(e) {

  var name = e.parameter.username;
  var email = e.parameter.email;
  var link = e.parameter.link;

  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");  

  ws.appendRow([new Date(), name, email, link]);
  Logger.log("Event logged" + name + " " + email + " " + link);

  return HtmlService.createHtmlOutput("<h1>Thanks for submitting your information</h1>");
}

这将在数据表中附加一行并记录一条消息，您可以从脚本编辑器中查看该消息，并且更符合这种电子表格支持的 Web 应用程序的工作方式。

【讨论】：

【解决方案2】：

更新：

您的提交事件处理程序与提交表单的默认浏览器操作发生冲突，因此调用了google.script.run.fn()，但在您看到结果之前浏览器也会移动到另一个页面。如果您将事件参数添加到您的fn 并调用e.preventDefault()，您至少将有机会看到您调用google.script.run.fn() 的效果。

  function fn(e) {
    e.preventDefault();

    var uname = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var link = document.getElementById("link").value;

    google.script.run
       .withSuccessHandler(function(){
         alert("success");
       })
       .withFailureHandler(function(e){
         alert("error:" + e);
       })
       .GG(uname,email,link);
  }

您现在应该会看到一条错误消息，它会告诉您您没有打开电子表格的权限。

您的 GG() 函数不需要重新打开电子表格 - 它已经与您的脚本相关联：

function GG(name, email, link) {    
  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
  ws.appendRow([new Date(), name, email, link]);
  Logger.log("GG function is working:" + new Date());
}

【讨论】：

我尝试使用您的解决方案，但没有任何警报弹出。我认为 google.script.run 可能有问题。