Google Apps Script：表单编辑Google表格单元格值无法保存问题求助

我来帮你排查一下问题，你的代码里有几个关键错误导致数据没更新，咱们一步步拆解并修正：

核心问题分析 #

1. 前端函数逻辑混乱

   • EditVal() 函数完全多余且存在错误：你试图获取不存在的Field1元素（表单输入框ID是Field1Edit），同时formObject在这个函数里根本没有定义，执行时会报错（只是你没查看控制台错误）。
   • 表单提交触发逻辑冲突：既给表单绑定了onsubmit事件，又给提交按钮绑定了onclick，还加了preventFormSubmit阻止默认提交，导致实际提交逻辑未正确触发。
   • 缺少行号传递：后端不知道要更新哪一行数据，你没有把编辑目标的行号传递给processForm2函数。

2. 后端函数参数错误

   • 后端用formObject.Field1获取值，但表单输入框的name属性是Field1Edit，导致后端根本拿不到数据。
   • Google Sheets的行列索引从1开始，你初始cell = 0会定位到无效单元格。

修正后的完整代码 #

前端HTML表单代码 #

<!DOCTYPE html>
<html>
<body>
<section>
  <div>
    <button id="edit" onclick="Edit();Fill()">Edit</button>
  </div>
  <form id="myForm" onsubmit="handleFormSubmit2(event)">
    <!-- 隐藏域存储要编辑的行号，假设你之前把行号存在localStorage的rowNum里 -->
    <input type="hidden" id="rowNum" name="rowNum" value="">
    <section>
      <div>
        <label for="Field1">Field 1 :</label>
        <textarea type="text" id="Field1Edit" name="Field1Edit"></textarea>
      </div>
      <div>
        <label for="Field2">Field 2:</label>
        <textarea type="text" id="Field2Edit" name="Field2Edit"></textarea>
      </div>
      <div>
        <label for="Field3">Field 3:</label>
        <textarea type="text" id="Field3Edit" name="Field3Edit"></textarea>
      </div>
      <div>
        <label for="Field4">Field 4 :</label>
        <textarea type="text" id="Field4Edit" name="Field4Edit"></textarea>
      </div>
    </section>
    <div>
      <button type="submit">Submit</button>
    </div>
  </form>
  <div id="output"></div>
  <script>
    // 显示表单并设置要编辑的行号
    function Edit() {
      document.getElementById('myForm').style.display='block';
      // 从localStorage取出之前存储的行号，赋值给隐藏域
      document.getElementById("rowNum").value = localStorage["rowNum"];
    }
    // 预填表单原有数据
    function Fill() {
      var listData2 = JSON.parse(localStorage["Data"]); 
      document.getElementById("Field1Edit").value = listData2[1];
      document.getElementById("Field2Edit").value = listData2[2];
      document.getElementById("Field3Edit").value = listData2[3];
      document.getElementById("Field4Edit").value = listData2[4];
    }
    // 阻止表单默认提交行为
    function preventFormSubmit() {
      var forms = document.querySelectorAll('form');
      for (var i = 0; i < forms.length; i++) {
        // 注意事件名是小写的submit
        forms[i].addEventListener('submit', function(event) {
          event.preventDefault();
        });
      }
    }
    window.addEventListener('load', preventFormSubmit);
    // 处理表单提交并调用后端函数
    function handleFormSubmit2(event) {
      const form = event.target;
      // 用FormData传递表单数据，更可靠
      google.script.run.processForm2(new FormData(form));
      form.reset();
      // 添加成功提示
      document.getElementById("output").textContent = "数据更新成功！";
    }
  </script>
</body>
</html>

后端Google Apps Script代码（processForm2） #

/* Process Form and replace data in the Sheet */
function processForm2(formData) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Tracker");
  // 从表单获取行号和编辑后的值
  const rowNum = parseInt(formData.get('rowNum'));
  const field1 = formData.get('Field1Edit');
  const field2 = formData.get('Field2Edit');
  const field3 = formData.get('Field3Edit');
  const field4 = formData.get('Field4Edit');

  // 校验行号有效性（假设表头在第1行，数据从第2行开始）
  if (isNaN(rowNum) || rowNum < 2) {
    throw new Error("无效的行号");
  }

  // 更新对应列：Field1对应第2列，Field2第3列，依此类推
  if (field1) sheet.getRange(rowNum, 2).setValue(field1);
  if (field2) sheet.getRange(rowNum, 3).setValue(field2);
  if (field3) sheet.getRange(rowNum, 4).setValue(field3);
  if (field4) sheet.getRange(rowNum, 5).setValue(field4);
}

关键修改点说明 #

1. 添加隐藏域传递行号：通过隐藏的rowNum输入框，把要编辑的行号从前端传递到后端，确保后端能定位到目标行。
2. 简化提交逻辑：去掉多余的EditVal()函数，用FormData传递表单数据，避免参数匹配错误。
3. 修正后端参数获取：用formData.get('Field1Edit')正确获取表单输入值，同时行列索引从1开始，定位到正确单元格。
4. 修复事件监听错误：把大写的Submit改为小写的submit，确保阻止默认提交的逻辑生效。

另外，记得在打开编辑表单前，要把选中行的索引存储到localStorage["rowNum"]里（比如选择行时记录行号），这样前端才能拿到正确的行号传递给后端。

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