Google Sheets自定义对话框提交表单后无数据输出问题求助

核心问题原因 #

• GAS代码中读取表单字段的名称和HTML表单实际配置完全不匹配，无法正常提交后取不到正确的表单数据
• 默认appendRow方法会直接在工作表末尾追加行，无法满足从第7行（第6行是表头）开始写入的需求
• 缺少错误回调逻辑，出现故障时无法快速定位问题

修复后的完整代码 #

1. GAS部分代码 #

//@OnlyCurrentDoc

function onOpen() {
  SpreadsheetApp
    .getUi()
    .createMenu("Klassenbuch")
    .addItem("Stunde eintragen", "showFeedbackDialog")
    .addToUi();
}

function showFeedbackDialog() {
  var widget = HtmlService.createHtmlOutputFromFile("Form.html");
  SpreadsheetApp.getUi().showModalDialog(widget, "Stunde eintragen");
}

function appendRowFromFormSubmit(form) {
  const sheet = SpreadsheetApp.getActiveSheet();
  // 获取A列从第7行开始的数据，定位第一个空行
  const colAValues = sheet.getRange("A7:A").getValues();
  let emptyRowOffset = 0;
  for (let i = 0; i < colAValues.length; i++) {
    if (colAValues[i][0] === "") {
      emptyRowOffset = i;
      break;
    }
  }
  // 计算实际写入行号，按A=日期、B=内容、C=授课人、D=缺课状态的顺序写入
  const targetRow = 7 + emptyRowOffset;
  const rowData = [form.Datum, form.Inhalt, form.Lehrkraft, form.Ausfall];
  sheet.getRange(targetRow, 1, 1, 4).setValues([rowData]);
}

2. HTML部分代码（仅需修改提交函数，添加错误回调） #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <script>
    function submitForm() {
      google.script.run
        .withFailureHandler(err => alert("提交失败：" + err))
        .appendRowFromFormSubmit(document.getElementById("Stunde eintragen"));
      document.getElementById("form").style.display = "none";
      document.getElementById("Danke").style.display = "block";
    }
  </script>
</head>
<body>
  <div>
  <div id="form">
  
  <form id="Stunde eintragen">
    <label for="Datum">Datum</label>
    <input type="date" id="Datum" name="Datum"><br><br>
    <label for="Inhalt">Inhalt</label>
    <input type="text" id="Inhalt" name="Inhalt" size="60"><br><br>
    <label for="Lehrkraft">Lehrkraft</label>
       <select id="Lehrkraft" name="Lehrkraft">
          <option value="Alexander Michaelis">Alexander Michaelis</option>
          <option value="Thomas Weider">Thomas Weider</option>       
       </select>
     
    <div>
       </br>
      <label for="Ausfall">Stunde ausgefallen?</label><br>
      <input type="radio" id="E" name="Ausfall" value="E">
      <label for="E">Entschuldigt</label><br>
      <input type="radio" id="UE" name="Ausfall" value="UE">
      <label for="UE">Unentschuldigt</label><br><br>
      <input type="button" value="Eintragen" onclick="submitForm();">
  </form>
  </div>
  </div>
  <div id="Danke" style="display: none;">
    <p>Die Stunde wurde eingetragen!</p>
  </div>
</body>
</html>

生效操作步骤 #

1. 保存修改后的代码，刷新Google Sheets页面，重新加载自定义菜单
2. 首次运行时按照系统提示完成脚本权限授权
3. 如果仍有异常可打开Apps Script编辑器的「执行日志」查看具体报错信息

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