提交表单后如何编辑谷歌表格 HTML UI 元素？答案

【问题标题】：How can I edit a google sheets HTML UI element after submitting form?提交表单后如何编辑谷歌表格 HTML UI 元素？
【发布时间】：2019-07-10 05:48:33
【问题描述】：

来自How can I add multiple inputs from an HTML UI to a Google Spreadsheet?，我从上面的答案中复制了以下脚本，并添加了 2 个，我在下面的脚本中用 cmets 进行了标记。

addItem.gs

以下文件已添加 #2

function openInputDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index').setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi()
       .showModalDialog(html, 'Add Item');
}

function itemAdd(form) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheets()[0];
  //Addition #2
  document.getElementById("status_value").innerHTML = "Submitted!"; 
  sheet.appendRow(["  ", form.category, form.item, form.manupub, form.details, form.quantity]);
  return true;
}

Index.html

下面的文件中添加了 #1

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <br>
  <form>
    Category:<br>
    <input type="text" name="category">
    <br>
    Item:<br>
    <input type="text" name="item">
    <br>
    Manufacturer or Publisher:<br>
    <input type="text" name="manupub">
    <br>
    Details:<br>
    <input type="text" name="details">
    <br>
    Quantity:<br>
    <input type="text" name="quantity">
    <br><br>
     <input type="button" value="Submit"
        onclick="google.script.run
            .withSuccessHandler(google.script.host.close)
            .itemAdd(this.parentNode)" />
    </form>
    <!-- Addition #1 -->
    <p>Status: </p><p id="status_value"></p>
</html>

问题：

上面的脚本在添加到添加 #2 时失败。似乎在 html 中找不到 id=status_value 元素。

注意：

我希望从 .gs 脚本文件更新 html，因为我有脚本可能需要一段时间的用例，我想在脚本到达脚本中的某些里程碑时更改状态消息。

【问题讨论】：

标签： html google-apps-script web-applications google-sheets

【解决方案1】：

“.gs”文件在服务器端运行，html 在客户端运行。你不能像它们一起运行一样来回传递数据，因此'google.script.run'functionality。

如果您想在使用该功能从客户端调用函数后从服务器端脚本发回数据，只需return 它。

然后您可以使用返回的数据在客户端进行更改：

HTML

<input type="button" value="Submit" onclick="google.script.run .withSuccessHandler(function (data) { document.getElementById("status_value").innerHTML = data; google.script.host.close() ; } ) .itemAdd()" />

.gs

function itemAdd(form) { 
var ss = SpreadsheetApp.getActiveSpreadsheet(); 
var sheet = ss.getSheets()[0];
sheet.appendRow([" ", form.category, form.item, form.manupub, form.details, form.quantity]); 
return "Submitted" ;
 }

【讨论】：

我实际上是用手机写的（长途旅行很无聊），所以可能会有一些错误，但要点就在那里！
非常感谢。这看起来很有趣，我可能能够实现类似于我正在尝试做的事情。如何访问 HTML 中的“已提交”值？如果我有一个例子，我可以根据自己的目的进行修改。
'. onSuccessHandler()' 接受一个带参数的函数。当您从使用的服务器返回一个值时，您可以访问该参数，请参阅上面示例中的“数据”参数。
我没有意识到这一点。了解非常有帮助。谢谢。

【解决方案2】：

请注意

... DOM 操作或 Window API 等基于浏览器的功能不可用。

上面的意思是getElementById不能用在服务器端代码（.gs）上。

从我的answer 到Google Apps Script Javascript Standard Support

从 https://developers.google.com/apps-script/guides/services/#basic_javascript_features （2019 年 1 月 27 日）

基本的 JavaScript 功能

Apps 脚本基于JavaScript 1.6，加上来自1.7 的一些功能和 1.8。因此，除了内置和高级谷歌服务：可以使用Array等常用对象， Date, RegExp, 和等等，以及Math 和Object 全局对象。但是，因为 Apps 脚本代码在 Google 的服务器（不是客户端，HTML 服务除外）页面），基于浏览器的功能，如 DOM 操作或Window API 不可用。

【讨论】：