从Google表单填充HTML表单

Populate HTML form from Google Sheets

本文关键字：表单 HTML 填充 Google      更新时间：2023-09-26

我是相当新的这一切，但我希望填充一个应用程序脚本Web应用程序HTML下拉表单条目直接从谷歌电子表格的名称。到目前为止，我已经能够从电子表格的A列返回一个名称数组。同样，JS的"Populates Form"部分也成功地填充了HTML表单。

我的问题是如何将两者连接起来?我试过用函数getColleagueList()替换JS后部分的硬编码数组，以及删除函数，只留下变量和表单仍然没有填充。我觉得这是一个简单的解决方案，但不知道该怎么做。提前谢谢。

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

getColleagueList()应该是一个服务器端函数。你可以把它放在代码里。gs文件。然后从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>

@HariDas用后端.gs代码给出了一个很好的答案，一切都工作得很好。你的web应用程序代码也很好，只是有一点改变要做:

    var options = values[0]; 
    //change it to:
    var options = values;

This现在将循环遍历数组并给出如下所示的所有结果:Web应用程序

希望有帮助:)好运！

相关文章：