HTML表单数据无法保存至Google Sheet问题求助

根因分析 #

1. 表头获取逻辑错误：Apps Script中sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValue()[0]写法错误，getValue()仅返回单个单元格值，而非整行数组，导致无法正确匹配表单字段与表头。
2. 下拉菜单无有效表单控件：HTML中的状态下拉使用<a>和<span>标签，没有可被FormData捕获的表单输入控件，status字段不会被提交。
3. HTML结构不完整：多个<div class="input-box">标签未闭合，可能导致浏览器解析表单元素异常。
4. 字段名匹配问题：需确保Google Sheet表头与HTML表单元素name属性完全一致，否则对应字段会提交为空。

修复方案 #

一、修正Google Apps Script代码 #

修改表头获取逻辑，同时优化错误信息输出：

const sheetName = 'Data record'
const scriptProp = PropertiesService.getScriptProperties()

function initialSetup(){
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key' , activeSpreadsheet.getId())
}

function doPost (e){
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try{
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    // 修复：用getValues()获取整行表头数组
    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService.createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
    .setMimeType(ContentService.MimeType.JSON)
  }

  catch(e){
    // 优化：返回具体错误字符串
    return ContentService.createTextOutput(JSON.stringify({ 'result': 'error', 'error': e.toString() }))
    .setMimeType(ContentService.MimeType.JSON)
  }

  finally{
    lock.releaseLock()
  }
}

二、修正HTML代码 #

1. 修复下拉菜单，添加有效表单控件

如果要保留原有UI样式，添加隐藏输入框并通过JS同步选中值：

<div class="box">
  <!-- 新增隐藏输入框，用于提交status值 -->
  <input type="hidden" name="status" id="status-input" required>
  <div class="dropdown">Status
      <span class="left-icon"><i class='bx bx-chevrons-down'></i></span>
      <span class="right-icon"></span>
      <div class="choices">
          <a href="#" style="--i:1;" data-value="Passed">Passed</a>
          <a href="#" style="--i:2;" data-value="Failed">Failed</a>
          <a href="#" style="--i:3;" data-value="Pending">Pending</a>
          <a href="#" style="--i:4;" data-value="Expired">Expired</a>
      </div>
  </div>
</div>

在script2.js中添加同步逻辑：

// 同步下拉选择到隐藏输入框
document.querySelectorAll('.choices a').forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    document.getElementById('status-input').value = this.dataset.value;
    // 可选：更新下拉显示文本
    this.closest('.dropdown').firstChild.textContent = this.textContent;
  });
});

2. 修复HTML结构，闭合未关闭的标签

补充所有缺失的</div>标签，确保每个<div class="input-box">都正确闭合：

<div class="input-box">
    <div class="input-field">
        <input type="text" placeholder="Company name" name="company_name" required>
        <i class='bx bx-building'></i>
    </div>
</div>

<div class="input-box">
    <div class="input-field">
        <input type="text" placeholder="Position applied" name="position_applied" required>
        <i class='bx bx-briefcase'></i>
    </div>
</div>

<div class="input-box">
    <div class="input-field">
        <input type="text" placeholder="Source" name="source" required>
            <i class='bx bx-mobile'></i>
    </div>
</div>

<div class="input-box">
    <div class="input-field">
        <input type="text" placeholder="Email" name="email" required>
        <i class='bx bx-envelope'></i>
    </div>
</div>

<div class="input-box">
    <div class="input-field">
        <input type="date" placeholder="Date applied" name="dated_applied" required>
    </div>
</div>

3. 优化提交脚本，查看详细响应

修改JS提交代码，打印响应详情并添加用户提示：

const scriptURL = 'https://script.google.com/macros/s/AKfycbyw9-TkMWaD_uMVpkPOelDTpKtth5OLTHyoKU6wTZkzlS0H-d9WqM2E2mITP6ZQNnb1/exec'
const form = document.forms['google-spreadsheet']
const successMsg = document.getElementById('success')

form.addEventListener('submit', e => {
  e.preventDefault()
  fetch(scriptURL, { method: 'POST', body: new FormData(form)})
    .then(response => response.json())
    .then(data => {
      console.log('提交结果:', data)
      successMsg.textContent = '提交成功！'
      successMsg.style.color = 'green'
      form.reset()
    })
    .catch(error => {
      console.error('提交错误:', error.message)
      successMsg.textContent = '提交失败，请重试！'
      successMsg.style.color = 'red'
    })
})

验证步骤 #

1. 确保Google Sheet表头与HTML表单name属性完全一致，表头需包含：company_name、position_applied、source、email、dated_applied、status、Date。
2. 重新部署Apps Web应用，权限设置为「任何人，甚至匿名」，更新部署URL。
3. 运行initialSetup()函数，确保脚本属性已保存Spreadsheet ID。

内容的提问来源于stack exchange，提问作者Nino Rodel Niebres