Google Apps 脚本 HTML 服务根据用户选择动态填充答案

【问题标题】：Google Apps Script HTML Service dynamically populate based on user selectionsGoogle Apps 脚本 HTML 服务根据用户选择动态填充
【发布时间】：2018-03-18 21:06:55
【问题描述】：

我想要一个 HTML 表单，用户可以在其中选择他们希望修改的人员记录的名称。用户选择姓名后，需要从电子表格中检索该人的详细信息，并用于预先填写表单上的各个字段以允许用户对其进行编辑。

我该怎么做：

a) 在用户从列表中选择一个人之后，用数据库中的值更新表单上的值（当前是这样，以便也可以更新所选名称 - 在填充表单的其余部分之后）

或

b) 显示一个只有一个人名的表格（我可以做到这一点）。当用户单击“提交”时获取此数据，在电子表格中查找用户并将相关详细信息传递到新表单，以便用户可以编辑这些详细信息。

在后台，我打算删除所有与原始选择相关的行，并根据编辑的表单数据插入行。

我可以绘制表单并填充各个字段，但我正在努力在字段中进行选择后更新表单，或者将值传递给第二个表单以便可以在那里进行更新。

我没有包含任何代码，因为我没有任何工作要做。我有一个 gs 文件和一个 html 模板文件，并且知道如何相互调用。我尝试了各种方法，但每次都失败了:(

【问题讨论】：

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

【解决方案1】：

在您的输入字段上使用 DOM 事件侦听器来调用特定的 Apps 脚本函数，该函数读取您的数据源，并将包含所需数据的对象返回给 HTML 文件的 javascript 中的成功/失败处理程序。该页面内成功/失败处理程序将根据需要操作 DOM 元素以显示您的下一个问题（或要求正确输入的适当帮助消息等）

非常相关：

【讨论】：

谢谢@tehhowch，但我无法让它工作。如果我添加onchange="google.script.run.editPerson()" 会调用“editPerson()”函数，但不会传递表单的上下文，因此不会对表单进行更新。如果我将其更改为 onchange="google.script.run.editPerson(this.parentNode)"，则不会调用 editPerson(form) 函数。你能给我/给我一个它是如何工作的例子吗？我成功地使用成功/失败处理程序将数据从表单获取到电子表格中，但是更新已经呈现的 HTML 表单的具体示例是我的挑战。
@kxm 首先进行静态值更新（例如，始终将其“职业”的值设置为“画家”），完全在 HTML 文件中。一旦你有了它，任务就变成了“给我的静态值更新函数提供实际值”。此外，一旦您进行了静态值更新，就可以保证您拥有可以编辑到问题中的代码，以便获得有针对性的帮助。
我已经尝试过了——在名为 onchange 的函数中将字段的值设置为 1。它不起作用，因为如果我在调用函数时使用this.parentNode，则不会调用该函数。如果我将 this.parentNode 从函数调用中取出，则调用该函数，但没有表单的上下文。所以我被困住了。
谢谢@tehhowch 我有函数function editPerson(form){ Logger.log("editPerson"); form.getElementById('baseRate').value=1; } 但它甚至没有被onchange="google.script.run.editPerson(this.parentNode)" 调用
@kxm 您应该将 HTML 文件中的函数作为普通处理程序引用。这将帮助您调试它们，并避免使用冗长的元素说明符，因为当您调用异步方法时，如果您想将数据带回 HTML，则需要包含 withFailureHandler( ) 和 withSuccessHandler( )页。请查看第一个链接，以及它提供的所有示例文件（.gs 和 .html）。