表单提交时如何保存从Google Sheets导入的下拉列表选中值？

表单中从Google Sheets导入选项的下拉列表（Trabalhador字段）能正常加载选项，但提交时该字段值为空，无法保存到Google Sheets。

核心问题 #

1. 下拉列表<select id="name">缺少name属性，FormData无法捕获该字段的值
2. loadnames()函数中设置option.value = item[1]，但getList()仅返回单列数据（A列），item[1]为undefined，导致选项值为空
3. 原提交逻辑依赖外部脚本URL，且code.gs中无对应接收数据的函数，无法完成数据写入

解决方案 #

1. 修改HTML代码 #

修复下拉列表的name属性与选项值设置

修改Trabalhador字段的<select>标签并修正loadnames()逻辑：

<div class="mb-3">
    <label class="form-label">Trabalhador</label>
    <!-- 添加name属性，确保FormData能捕获字段值 -->
    <select id="name" name="trabalhador" onchange="onSelect()"></select><br>
    <script>loadnames();</script>
</div>

<script>
  function loadnames() {
    google.script.run.withSuccessHandler(function(ar) 
    {
      var nameSelect = document.getElementById("name");
      console.log(ar);
      
      let option = document.createElement("option");
      option.value = "";
      option.text = "";
      nameSelect.appendChild(option);
    
      ar.forEach(function(item, index) 
      {    
        let option = document.createElement("option");
        // 因getList()返回单列数据，使用item[0]作为选项值与显示文本（可根据需求调整）
        option.value = item[0];
        option.text = item[0];
        nameSelect.appendChild(option);    
      });
    
    }).getList();
  };
</script>

替换提交逻辑为调用内部GS函数

移除原fetch外部URL的代码，改为调用code.gs中的提交函数：

<script>
  // 提交表单数据到Google Sheets
  const form = document.forms['google-sheet']
  
  form.addEventListener('submit', e => {
    e.preventDefault()
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());
    
    google.script.run.withSuccessHandler(function() {
      alert("Registo Efetuado. Obrigado!");
      form.reset();
    }).withFailureHandler(function() {
      alert("Registo já existe na base de dados!!");
    }).submitForm(data);
  })
</script>

2. 修改code.gs代码 #

添加接收表单数据的submitForm函数

function submitForm(data) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  // 写入目标表名为"Responses"，可根据实际修改
  var responseSheet = ss.getSheetByName("Responses");
  if (!responseSheet) {
    // 若表不存在则创建并添加表头
    responseSheet = ss.insertSheet("Responses");
    responseSheet.appendRow(["Data", "Trabalhador", "Projeto", "EPI", "Obs"]);
  }
  // 按顺序写入表单数据
  responseSheet.appendRow([
    data.date,
    data.trabalhador,
    data.project,
    data.epi,
    data.notes
  ]);
  return "Success";
}

可选：修正getList函数的返回范围

如果NAMES表需要获取多列数据，调整getRange参数：

function getList() { 
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var nameSheet = ss.getSheetByName("NAMES"); 
  var getLastRow = nameSheet.getLastRow();  
  // 如需获取A、B两列，修改为getRange(2, 1, getLastRow - 1, 2)
  return nameSheet.getRange(2, 1, getLastRow - 1, 1).getValues();  
}

3. 验证步骤 #

1. 保存修改后的HTML与code.gs文件
2. 刷新Google Sheets，打开Custom菜单的Dropdown Form
3. 填写表单并提交，检查Responses表是否正确写入所有字段值

内容的提问来源于stack exchange，提问作者Nuno Marques