从 Google 表格填充 HTML 表单
[英]Populate HTML form from Google Sheets
问题描述
I am fairly new to all this but am looking to populate an Apps Script Web App HTML dropdown form entry with names directly from a Google Spreadsheet.
我对这一切还很陌生，但我希望使用直接来自 Google 电子表格的名称填充 Apps Script Web App HTML 下拉表单条目。 So far I have been able to return an array of the names from column A of my spreadsheet.到目前为止，我已经能够从我的电子表格的 A 列中返回一个名称数组。 Also, the "Populates Form" section of the JS successfully populates the HTML form.此外，JS 的“填充表单”部分成功地填充了 HTML 表单。
My question is how do I connect the two?我的问题是如何连接两者？ I have tried replacing the hard coded array in the latter part of the JS with the function getColleagueList() as well as removing the function and only leaving the variables and the form is still not populating.我已经尝试用函数 getColleagueList() 替换 JS 后半部分中的硬编码数组，并删除该函数并只留下变量并且表单仍未填充。 I feel like its a simple solution but don't know what to do.我觉得这是一个简单的解决方案，但不知道该怎么做。 Thanks in advance.提前致谢。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="selectColleague">
<option disabled selected value="">
Reviewer's Name
</option>
</select>
<script type="text/javascript">
//Gets Names
function getColleagueList() {
var s1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Roster Import');
var range = s1.getRange(2, 1,s1.getLastRow()-1, 1).getValues();
return range;
}
//Populates Form
var select = document.getElementById("selectColleague");
var options = ["1", "2", "3", "4", "5"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
</script>
2 个解决方案
解决方案1
4 已采纳 2016-08-28 04:31:13
getColleagueList() should be a server side function. getColleagueList() 应该是一个服务器端函数。 You can put it in Code.gs file.你可以把它放在 Code.gs 文件中。 Then call the server side function from JavaScript as follow: You can learn more here: https://developers.google.com/apps-script/guides/html/communication然后从 JavaScript 调用服务器端函数，如下所示：您可以在此处了解更多信息： https : //developers.google.com/apps-script/guides/html/communication
<script>
function onSuccess(values) {
var select = document.getElementById("selectColleague");
var options = values[0]; //Two dimensional array
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
google.script.run.withSuccessHandler(onSuccess)
.getColleagueList();
</script>
解决方案2
1 2016-08-29 10:33:34
@HariDas has given a great answer with the back-end .gs code and is all working fine. @HariDas 用后端 .gs 代码给出了很好的答案，并且一切正常。 Your web app code is also fine it just has a little change to be made:您的网络应用程序代码也很好，只是需要进行一些更改：
var options = values[0];
//change it to:
var options = values;
This will now loop through the array and give all the results as seen here: Web App现在将遍历数组并给出所有结果，如下所示： Web App
Hope that helps :) Good luck!希望有帮助:) 祝你好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.