从Google表格填充HTML表单 [英] Populate HTML form from Google Sheets

查看:99
本文介绍了从Google表格填充HTML表单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

对于这一切我还很陌生,但我希望使用直接来自Google Spreadsheet的名称填充Apps Script Web App HTML下拉表单条目.到目前为止,我已经能够从电子表格的A列中返回一组名称.此外,JS的填充表单"部分成功填充了HTML表单.

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. So far I have been able to return an array of the names from column A of my spreadsheet. Also, the "Populates Form" section of the JS successfully populates the HTML form.

我的问题是如何连接两者?我尝试用getColleagueList()函数替换JS后半部分的硬编码数组,并删除了该函数,只保留了变量,并且表单仍未填充.我觉得这是一个简单的解决方案,但不知道该怎么办.预先感谢.

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

推荐答案

getColleagueList()应该是服务器端函数.您可以将其放在Code.gs文件中.然后从JavaScript调用服务器端函数,如下所示: 您可以在此处了解更多信息: https://developers.google.com/apps-script /guides/html/communication

getColleagueList() should be a server side function. You can put it in Code.gs file. Then call the server side function from JavaScript as follow: You can learn more here: 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>

这篇关于从Google表格填充HTML表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆