如何从Google Apps Script Web App表单获取数据写入Google Sheets？

你的代码存在几个核心问题，导致数据无法写入表格：

1. 表单默认提交行为未阻止，且未正确调用GAS函数 #

HTML表单点击提交后会默认跳转，没有触发Google Apps Script的submitForm函数，这就是页面空白但无执行日志的原因。需要添加客户端脚本阻止默认行为，并通过google.script.run调用后端函数。

2. GAS后端函数参数处理错误 #

submitForm的参数e不是浏览器的document对象，而是Google Apps Script接收的请求参数，不能用querySelectorAll获取DOM元素。另外ROSTER未定义，需改为字符串常量，setValues要求传入二维数组而非普通文本。

修正后的HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm">
      <input type="text" id="userInput" name="userInput" placeholder="Enter Username" required>
      <input type="text" id="discordInput" name="discordInput" placeholder="Enter Discord Username" required>
      <button type="submit">Register</button>
    </form>

    <script>
      // 阻止表单默认跳转行为
      document.getElementById('myForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 提取表单输入值
        const userInput = document.getElementById('userInput').value;
        const discordInput = document.getElementById('discordInput').value;

        // 调用后端GAS函数，附带成功回调
        google.script.run.withSuccessHandler(() => {
          alert('提交成功！');
          this.reset(); // 清空表单
        }).submitForm({userInput, discordInput});
      });
    </script>
  </body>
</html>

修正后的Google Apps Script代码 #

const ROSTER = 'ROSTER'; // 定义工作表名称常量

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('register'); 
}

function submitForm(userData) {
  // 获取目标表格对象
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = spreadsheet.getSheetByName(ROSTER);
  if (!sheet) throw new Error('未找到名为ROSTER的工作表');

  // 准备写入数据（二维数组格式，对应表格一行）
  const rowData = [userData.userInput, userData.discordInput];
  
  // 追加到表格末尾（比固定单元格更灵活，适合多用户提交）
  sheet.appendRow(rowData);
  
  // 若需固定写入A3:A4区域，替换appendRow为以下代码：
  // const range = sheet.getRange(3, 1, 1, 2);
  // range.setValues([rowData]);
}

关键注意事项 #

• Web App部署权限：重新部署Web App时，将「谁可以访问此应用」设置为「任何人，甚至匿名」（按需调整，若需限制访问则选对应选项），否则外部访问会有权限问题。
• 执行日志排查：在GAS编辑器左侧点击「执行」标签，可查看函数执行日志和错误信息，快速定位问题。
• 表单name属性：输入框必须添加name属性，否则FormData或DOM取值可能失效，这是容易忽略的细节。

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