本文旨在解决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变量
// ... 后续变量获取 ...
}这导致的结果是：
- 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 
