解决Google Apps Script侧边栏表单提交功能失效问题-html教程-PHP中文网

解决google apps script侧边栏表单提交功能失效问题

本文旨在解决Google Apps Script侧边栏表单中提交功能失效的常见问题。通过详细分析HTML结构、JavaScript变量赋值错误及脚本加载顺序，提供一套完整的诊断与修复方案，确保表单数据能够正确地从客户端传递到服务器端Apps Script函数并成功处理。

在开发Google Apps Script与Google Sheet集成的侧边栏表单时，开发者常会遇到提交按钮点击后无响应、数据无法写入表格的问题。这通常是由于客户端HTML和JavaScript代码与服务器端Apps Script函数之间的交互配置不当或存在细微错误所致。本教程将深入探讨导致此类问题的核心原因，并提供专业的解决方案和最佳实践。

理解Apps Script侧边栏表单的工作原理

Google Apps Script侧边栏表单本质上是一个在Google Workspace应用（如Google Sheets）中运行的HTML页面。它通过google.script.run API实现客户端（HTML/JavaScript）与服务器端（Apps Script .gs文件）之间的异步通信。当用户在表单中点击提交按钮时，客户端JavaScript会收集表单数据，并通过google.script.run调用Apps Script中相应的函数来处理这些数据。

如果提交功能失效，通常意味着以下几个环节之一出现了问题：

HTML结构或元素ID不匹配：JavaScript无法正确获取表单元素的值。
JavaScript逻辑错误：如变量赋值错误、函数调用错误等。
google.script.run调用不当：参数传递错误或服务器端函数签名不匹配。
脚本加载顺序问题：JavaScript在DOM元素加载完成前尝试操作它们。
Apps Script服务器端函数错误：函数本身存在逻辑错误或权限问题。

核心诊断与解决方案

针对提交功能失效的问题，我们将从HTML结构、JavaScript逻辑和脚本加载顺序三个方面进行详细诊断和修正。

1. HTML结构错误：div标签错位

一个常见的错误是HTML标签的闭合顺序或位置不正确，这可能导致页面渲染异常，甚至影响JavaScript对DOM元素的访问。

问题示例： 在提供的HTML代码中，可能存在一个错位的</div>标签，它原本应该关闭一个包裹表单内容的div，但却被放置在了</form>标签之后，导致了HTML结构上的混乱。

<!-- 原始代码中可能存在的错误结构 -->
<form>
  <div style="padding: 10px" >
    <!-- 表单字段 -->
    <div class="form-row">
      <div class="form-group col-md-6 narrow" >
        <input type="button" value="Submit" onclick="SubmitRecord()" class="btn btn-primary" />
      </div>
    </div>
  </div>  <!-- 这里的</div>是关闭padding: 10px的div -->
</form>
<div id="displayReturn" ></div>
<!-- 假设这里多了一个不属于任何父元素的</div>，导致结构混乱 -->
<!-- </div> -->

登录后复制

解决方案： 确保所有HTML标签都正确嵌套和闭合。特别是像div这样的容器标签，其闭合位置对页面布局和JavaScript的DOM操作至关重要。

修正示例：

<form>
  <div style="padding: 10px">
    <!-- ... 表单字段和提交按钮 ... -->
    <div class="form-row">
      <div class="form-group col-md-6 narrow">
        <input type="button" value="Submit" onclick="SubmitRecord()" class="btn btn-primary" />
      </div>
    </div>
  </div> <!-- 确保这个</div>正确关闭了padding: 10px的div -->
</form>
<div id="displayReturn"></div> <!-- 这个div与form平级，用于显示返回信息 -->
<!-- 移除任何多余或错位的</div>标签 -->

登录后复制

2. JavaScript变量赋值错误

这是导致提交功能失效的一个关键且隐蔽的问题。在客户端JavaScript中，如果一个变量被错误地赋值或覆盖，那么传递给Apps Script函数的数据就会不正确。

问题示例： 在SubmitRecord()函数中，kode_unitcipta变量被重复赋值，并且第二次赋值实际上获取的是uraian字段的值。

function SubmitRecord() {
  // ... 其他变量获取 ...
  var kode_unitcipta = document.getElementById("kode_unitcipta").value; // 第一次赋值
  var kode_unitcipta = document.getElementById("uraian").value; // 错误：这里应该获取uraian的值，并赋值给uraian变量
  // ... 后续变量获取 ...
}

登录后复制

这导致的结果是：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

kode_unitcipta最终会存储uraian字段的值。
uraian变量（如果后续有定义）将无法获取到其对应的表单值，或者在传递给AddRecord时，uraian参数会收到一个undefined或空字符串。

解决方案： 仔细检查所有变量的声明和赋值，确保每个表单字段的值都被正确地获取并赋值给对应的变量。

修正示例：

function SubmitRecord() {
  document.getElementById("displayReturn").innerHTML = "";
  var nomor = document.getElementById("nomor").value;
  var klasifikasi = document.getElementById("klasifikasi").value;
  var kode_unitcipta = document.getElementById("kode_unitcipta").value;
  var uraian = document.getElementById("uraian").value; // 修正：正确获取并赋值给uraian
  var kurunwaktu_awal = document.getElementById("kurunwaktu_awal").value;
  var kurunwaktu_akhir = document.getElementById("kurunwaktu_akhir").value;
  var tingkat_perkembangan = document.getElementById("tingkat_perkembangan").value;
  var media_simpan = document.getElementById("media_simpan").value;
  var kondisi_fisik = document.getElementById("kondisi_fisik").value;
  var jumlah_berkas = document.getElementById("jumlah_berkas").value;
  var kode_ruang = document.getElementById("kode_ruang").value;
  var nomor_lemari = document.getElementById("nomor_lemari").value;
  var nomor_boks = document.getElementById("nomor_boks").value;
  var nomor_folder = document.getElementById("nomor_folder").value;

  google.script.run.withSuccessHandler(returnBack)
    .AddRecord(nomor, klasifikasi, kode_unitcipta, uraian, kurunwaktu_awal, kurunwaktu_akhir, tingkat_perkembangan, media_simpan, kondisi_fisik, jumlah_berkas, kode_ruang, nomor_lemari, nomor_boks, nomor_folder);
}

登录后复制

3. 脚本加载顺序优化

将JavaScript代码放置在HTML文档的<head>部分可能会导致问题，因为此时DOM元素可能尚未完全加载。当脚本尝试访问或操作尚未存在的元素时，就会发生错误。

解决方案： 将所有<script>标签放置在</body>标签之前，</form>标签之后。这确保了在JavaScript代码执行时，所有的HTML元素都已经加载并可供访问。

修正示例： 将整个<script>块从<head>移动到</body>标签之前。

  </head>
  <body>
    <form>
      <!-- ... 表单内容 ... -->
    </form>
    <div id="displayReturn"></div>

    <script>
      // 所有的JavaScript函数定义，包括SubmitRecord, returnBack, GetKlasifikasi
      function SubmitRecord() { /* ... */ }
      function returnBack(stringBack) { /* ... */ }
      function GetKlasifikasi() { /* ... */ }

      // 确保在DOM加载完成后调用初始化函数，例如GetKlasifikasi
      GetKlasifikasi();
    </script>
  </body>
</html>

登录后复制

4. 数据传递的优化建议 (可选但推荐)

当表单字段很多时，逐个将参数传递给Apps Script函数会使代码冗长且不易维护。更推荐的做法是将所有表单数据收集到一个JavaScript对象或数组中，然后将该对象/数组作为单个参数传递。

Apps Script (.gs文件) 示例：

function AddRecordOptimized(formData) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName("Data");

  // 从formData对象中解构数据
  var { nomor, klasifikasi, kode_unitcipta, uraian, kurunwaktu_awal, kurunwaktu_akhir,
        tingkat_perkembangan, media_simpan, kondisi_fisik, jumlah_berkas,
        kode_ruang, nomor_lemari, nomor_boks, nomor_folder } = formData;

  if (nomor && klasifikasi && kode_unitcipta && uraian && kurunwaktu_awal && kurunwaktu_akhir &&
      tingkat_perkembangan && media_simpan && kondisi_fisik && jumlah_berkas &&
      kode_ruang && nomor_lemari && nomor_boks && nomor_folder) {
    dataSheet.appendRow([
      nomor, klasifikasi, kode_unitcipta, uraian, kurunwaktu_awal, kurunwaktu_akhir,
      tingkat_perkembangan, media_simpan, kondisi_fisik, jumlah_berkas,
      kode_ruang, nomor_lemari, nomor_boks, nomor_folder, new Date()
    ]);
    return "<span style=\"font-weight: bold\" >数据已成功记录！</span>";
  } else {
    return "<span style=\"font-weight: bold; color: red\" >数据不完整，请检查！</span>";
  }
}

登录后复制

HTML (.html文件) SubmitRecord()函数示例：

function SubmitRecord() {
  document.getElementById("displayReturn").innerHTML = "";

  var formData = {
    nomor: document.getElementById("nomor").value,
    klasifikasi: document.getElementById("klasifikasi").value,
    kode_unitcipta: document.getElementById("kode_unitcipta").value,
    uraian: document.getElementById("uraian").value,
    kurunwaktu_awal: document.getElementById("kurunwaktu_awal").value,
    kurunwaktu_akhir: document.getElementById("kurunwaktu_akhir").value,
    tingkat_perkembangan: document.getElementById("tingkat_perkembangan").value,
    media_simpan: document.getElementById("media_simpan").value,
    kondisi_fisik: document.getElementById("kondisi_fisik").value,
    jumlah_berkas: document.getElementById("jumlah_berkas").value,
    kode_ruang: document.getElementById("kode_ruang").value,
    nomor_lemari: document.getElementById("nomor_lemari").value,
    nomor_boks: document.getElementById("nomor_boks").value,
    nomor_folder: document.getElementById("nomor_folder").value
  };

  google.script.run.withSuccessHandler(returnBack)
    .AddRecordOptimized(formData); // 调用优化后的Apps Script函数
}

登录后复制

完整代码示例

结合上述所有修正和优化建议，以下是修正后的HTML和Apps Script代码。

Arsip.html (HTML文件)

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
    <style>
      .narrow {
        margin-bottom: 0.5rem;
      }
    </style>
  </head>
  <body>
    <form>
      <div style="padding: 10px">

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="nomor" style="margin-bottom: 0rem">Nomor</label>
            <input type="text" id="nomor" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="klasifikasi" style="margin-bottom: 0rem">Klasifikasi</label>
            <select id="klasifikasi" class="form-control"></select>
          </div>
        </div>

        <!-- 修正: 确保所有字段的ID和label文本与实际用途匹配 -->
        <!-- 原始代码中存在'last_name', 'street', 'city'等与变量名不符的label，这里仅保留原ID，建议根据实际用途修改label -->
        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="kode_unitcipta" style="margin-bottom: 0rem">Kode Unit Cipta</label>
            <input type="text" id="kode_unitcipta" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="uraian" style="margin-bottom: 0rem">Uraian</label>
            <input type="text" id="uraian" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="kurunwaktu_awal" style="margin-bottom: 0rem">Kurun Waktu Awal</label>
            <input type="text" id="kurunwaktu_awal" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="kurunwaktu_akhir" style="margin-bottom: 0rem">Kurun Waktu Akhir</label>
            <input type="text" id="kurunwaktu_akhir" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="tingkat_perkembangan" style="margin-bottom: 0rem">Tingkat Perkembangan</label>
            <input type="text" id="tingkat_perkembangan" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="media_simpan" style="margin-bottom: 0rem">Media Simpan</label>
            <input type="text" id="media_simpan" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="kondisi_fisik" style="margin-bottom: 0rem">Kondisi Fisik</label>
            <input type="text" id="kondisi_fisik" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="jumlah_berkas" style="margin-bottom: 0rem">Jumlah Berkas</label>
            <input type="text" id="jumlah_berkas" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="kode_ruang" style="margin-bottom: 0rem">Kode Ruang</label>
            <input type="text" id="kode_ruang" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="nomor_lemari" style="margin-bottom: 0rem">Nomor Lemari</label>
            <input type="text" id="nomor_lemari" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="nomor_boks" style="margin-bottom: 0rem">Nomor Boks</label>
            <input type="text" id="nomor_boks" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <label for="nomor_folder" style="margin-bottom: 0rem">Nomor Folder</label>
            <input type="text" id="nomor_folder" class="form-control" />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6 narrow">
            <input type="button" value="Submit" onclick="SubmitRecord()" class="btn btn-primary" />
          </div>
        </div>

      </div>
    </form>

    <div id="displayReturn"></div>

    <script>
      function SubmitRecord() {
        document.getElementById("displayReturn").innerHTML = "";
        var nomor = document.getElementById("nomor").value;
        var klasifikasi = document.getElementById("klasifikasi").value;
        var kode_unitcipta = document.getElementById("kode_unitcipta").value;
        var uraian = document.getElementById("uraian").value; // 修正了变量赋值错误
        var kurunwaktu_awal = document.getElementById("kurunwaktu_awal").value;
        var kurunwaktu_akhir = document.getElementById("kurunwaktu_akhir").value;
        var tingkat_perkembangan = document.getElementById("tingkat_perkembangan").value;
        var media_simpan = document.getElementById("media_simpan").value;
        var kondisi_fisik = document.getElementById("kondisi_fisik").value;
        var jumlah_berkas = document.getElementById("jumlah_berkas").value;
        var kode_ruang = document.getElementById("kode_ruang").value;
        var nomor_lemari = document.getElementById("nomor_lemari").value;
        var nomor_boks = document.getElementById("nomor_boks").value;
        var nomor_folder = document.getElementById("nomor_folder").value;

        google.script.run.withSuccessHandler(returnBack)
          .AddRecord(nomor, klasifikasi, kode_unitcipta, uraian, kurunwaktu_awal, kurunwaktu_akhir, tingkat_perkembangan, media_simpan, kondisi_fisik, jumlah_berkas, kode_ruang, nomor_lemari, nomor_boks, nomor_folder);
      }

      function returnBack(stringBack) {
        document.getElementById("displayReturn").innerHTML = stringBack;
        // 清空表单字段
        document.getElementById("nomor").value = '';
        document.getElementById("klasifikasi").value = '';
        document.getElementById("kode_unitcipta").value = '';
        document.getElementById("uraian").value = '';
        document.getElementById("kurunwaktu_awal").value = '';
        document.getElementById("kurunwaktu_akhir").value = '';
        document.getElementById("tingkat_perkembangan").value = '';
        document.getElementById("media_simpan").value = '';
        document.getElementById("kondisi_fisik").value = '';
        document.getElementById("jumlah_berkas").value = '';
        document.getElementById("kode_ruang").value = '';
        document.getElementById("nomor_lemari").value = '';
        document.getElementById("nomor_boks").value = '';
        document.getElementById("nomor_folder").value = '';
      }

      function GetKlasifikasi() {
        google.script

登录后复制

以上就是解决Google Apps Script侧边栏表单提交功能失效问题的详细内容，更多请关注php中文网其它相关文章！