如何根据所附电子表格中的列自动填充表单选项

时间：2019-08-10 10:26:04

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

我创建了一个新的Google表格来收集用户信息。在工作表脚本编辑器中，我创建了以下表单： https://script.google.com/macros/s/AKfycbz6uGmXfSiXg4lYseeX0IN7Qv_9eM4eN9knUtBm5Co/exec

上面的表单有一个选择题，我需要使用所附电子表格中的特定列自动填充

我在下面的代码中使用了他，但是由于某种原因，更新功能未读取表单选项或其他内容

当我运行更新表单函数时，它显示“ TypeError：在对象中找不到函数getItemById”

有什么解决方案可以通过工作表列更新表单选项

    function doGet() {
    return HtmlService.createTemplateFromFile('form.html')
        .evaluate() // evaluate MUST come before setting the Sandbox mode
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
    }


    function updateForm(){
    // call your form and connect to the drop-down item
    var form = ("https://script.google.com/macros/s/AKfycbz6uGmXfSiXg4lYseeX0IN7Qv_9eM4eN9knUtBm5Co/exec");

    var namesList = form.getItemById("890244015").asListItem();


    // identify the sheet where the data resides needed to populate the drop-down
    var ss = SpreadsheetApp.getActive();
    var names = ss.getSheetByName("CHOICES");

    // grab the values in the first column of the sheet - use 2 to skip header row 
    var namesValues = names.getRange(2, 16, names.getMaxRows() - 1).getValues();

    var studentNames = [];

    // convert the array ignoring empty cells
    for(var i = 0; i < namesValues.length; i++)    
    if(namesValues[i][0] != "")
      studentNames[i] = namesValues[i][0];

     // populate the drop-down with the array data
     namesList.setChoiceValues(studentNames);

     }

这是form.html代码：

<!DOCTYPE html>
<html>
<body>

<style>

body {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: white;
}

</style>


<link href='/static/forms/client/css/3145455273- 
mobile_formview_st_ltr.css' type='text/css' rel='stylesheet' media='screen 
and 
(max-device-width: 721px)'>



<div class="ss-form-container">

<div class="ss-header-image-container"><div class="ss-header-image-image"> 
<div class="ss-header-image-sizer"></div></div></div>

<div class="ss-top-of-page"><div class="ss-form-heading"><h1 class="ss- 
form-title" dir="ltr">Test</h1>
<div class="ss-form-desc ss-no-ignore-whitespace" dir="ltr">WELD DATE 
00</div>

<div class="ss-required-asterisk" aria-hidden="true" id="Required">* 
Required</div></div></div>

<br><br>

<div class="ss-form">


<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"     
onload="if(submitted) 
{window.location='https://sites.google.com/site/formredirection/';}"> 
</iframe>
  <form action="https://docs.google.com/forms/d/e/formid/formResponse" 
  method="post" target="hidden_iframe" 
 onsubmit="submitted=true;">


<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item ss-item-required ss-select"><div class="ss- 
 form-entry">
<label class="ss-q-item-label" for="entry_890244015"><div class="ss-q- 
title">JOINT
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"> 
</label>
<span class="ss-required-asterisk" aria-hidden="true">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>



<select name="entry.890244015" id="entry_890244015" aria-label="JOINT  " 
aria-required="true" required=""><option value=""></option>
<option value="OPTION 01">OPTION 01</option> <option value="OPTION 
02">OPTION 02</option> <option value="OPTION 03">OPTION 03</option> 
<option value="OPTION 04">OPTION 04</option></select>
</div></div></div>


<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item ss-item-required ss-radio"><div class="ss- 
form-entry">
<label class="ss-q-item-label" for="entry_117174731"><div class="ss-q- 
title">REP NO.
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"> 
</label>
<span class="ss-required-asterisk" aria-hidden="true">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>


<ul class="ss-choices" role="radiogroup" aria-label="REP NO.  "><li 
class="ss-choice-item">
<label><span class="ss-choice-item-control goog-inline-block"><input 
type="radio" name="entry.735659431" value="" id="group_735659431_1" 
role="radio" class="ss-q-radio" aria-label="" required="" aria- 
required="true"></span>
<span class="ss-choice-label"></span>
</label></li></ul>
<div class="error-message" id="117174731_errorMessage"></div></div></div> 
</div>



<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item ss-item-required ss-date"><div class="ss- 
form-entry">
<label class="ss-q-item-label" for="entry_1715668372"><div class="ss-q- 
title">WELD DATE
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"> 
</label>
<span class="ss-required-asterisk" aria-hidden="true">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>

<input type="date" name="entry.1715668372" value="" class="ss-q-date" 
dir="auto" id="entry_1715668372" aria-label="WELD DATE  " aria- 
required="true" required="">
</div></div></div>



<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item ss-item-required ss-select"><div class="ss- 
form-entry">
<label class="ss-q-item-label" for="entry_1048274308"><div class="ss-q- 
title">WELDER
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"> 
</label>
<span class="ss-required-asterisk" aria-hidden="true">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>

<select name="entry.1048274308" id="entry_1048274308" aria-label="WELDER  
" aria-required="true" required=""><option value=""></option>
<option value="WR 01">WR 01</option> <option value="WR 02">WR 02</option> 
<option value="WR 03">WR 03</option> <option value="WR 04">WR 04</option> 
</select>
</div></div></div>


<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item ss-item-required ss-select"><div class="ss- 
form-entry">
<label class="ss-q-item-label" for="entry_1712008875"><div class="ss-q- 
title">WPS
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"> 
</label>
<span class="ss-required-asterisk" aria-hidden="true">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>

<select name="entry.1712008875" id="entry_1712008875" aria-label="WPS  " 
aria-required="true" required=""><option value=""></option>
<option value="WPS 01">WPS 01</option> <option value="WPS 02">WPS 
02</option> <option value="WPS 03">WPS 03</option> <option value="WPS 
04">WPS 04</option></select>
</div></div></div>


<input type="hidden" name="draftResponse" value=" 
[null,null,&quot;-8333688893315580231&quot;]
">
<input type="hidden" name="pageHistory" value="0">



<input type="hidden" name="fbzx" value="-8333688893315580231">
<div class="ss-send-email-receipt" style="margin-bottom: 4px;" dir="ltr"> 
<label for="emailReceipt" style="display:inline;"></label></div>


<input type="submit" name="submit" value="Submit" id="ss-submit" 
class="jfk-button jfk-button-action "></form></div></div>

</body>
</html>

2 个答案:

答案 0 :(得分：1)

在a previous thread上，您已经获得有关如何创建HTML表单的答案。

在此问题的代码上，您尝试对字符串值使用getItemById，但是此方法来自Class Form。换句话说，此方法应仅在Google表单上使用，而不能在网络表单上使用。其他类似的方法，例如setChoiceValues，也会发生类似的情况。

要通过使用客户端代码从Web表单设置选项列表，应使用DOM方法，例如querySelectorAll，getElementsByTagName等。如果需要从电子表格中获取选项，则可以可以使用服务器端代码，也可以使用google.script.run从客户端调用该代码。

有关Google Apps脚本网络应用程序工作原理的概述，请阅读https://developers.google.com/apps-script/guides/web

相关

答案 1 :(得分：0)

考虑使用<?= ?>和<? ?> scriptlets

这使您可以访问HTML文件中的Apps SCript功能。

  

.gs文件

function doGet() {  
  return HtmlService
      .createTemplateFromFile('index')
      .evaluate();
}

function createInnerHTML(){
    var ss = SpreadsheetApp.getActive();
    var names = ss.getSheetByName("CHOICES");
    var namesValues = names.getRange(2, 16, names.getMaxRows() - 1).getValues(); 
   return namesValues;
}
  

HTML文件

<body>
...
<? var namesValues= createInnerHTML(); ?>  
<div>
<select name="entry.890244015" id="entry_890244015" aria-label="JOINT  " aria-required="true" required="">
<option value=""></option>
<option value="OPTION 01"><?= namesValues[0][0]?></option>
<option value="OPTION 02"><?= namesValues[1][0]?></option>
<option value="OPTION 03"><?= namesValues[2][0]?></option>
<option value="OPTION 04"><?= namesValues[3][0]?></option>
</select>
</div>
...
</body>

如果您的HTML框架是预先确定的，这是一个简单的解决方案（您预先知道下拉菜单将有4个选项）。

如果您想动态调整选项的数量，则更优雅的解决方案是：

  

.gs文件

function doGet() {  
  return HtmlService
      .createTemplateFromFile('index')
      .evaluate();
}

function createInnerHTML()
{
    var ss = SpreadsheetApp.getActive();
    var names = ss.getSheetByName("CHOICES");
    var namesValues = names.getRange(2, 16, names.getMaxRows() - 1).getValues(); 
    var InnerHTML = [];
    for (var i=0;i<namesValues.length;i++){
      InnerHTML.push('<option value="OPTION '+(i+1)+'>' + namesValues[i][0]+ '</option>'; 
    }); 
   InnerHTML.join('');
   return InnerHTML;
  }
  

HTML文件

<body>
...
<? var innerHTML= createInnerHTML(); ?>  
<div>
<select name="entry.890244015" id="entry_890244015" aria-label="JOINT  " aria-required="true" required="">
<option value=""></option>
//HERE the inner HTML will be inserted
<?= innerHTML?>
</select>
</div>
...
</body>
相关问题
最新问题