解决App Script侧边栏表单提交问题的教程-html教程-PHP中文网

解决App Script侧边栏表单提交问题的教程

本教程旨在解决google apps script侧边栏表单提交功能不响应的问题。文章将深入探讨常见的html结构错误、javascript变量赋值陷阱以及客户端脚本的最佳实践，如脚本放置位置和参数传递策略，并提供优化后的代码示例，帮助开发者有效诊断并修复表单数据无法成功发送到google sheets的故障。

在使用Google Apps Script开发Google Sheets侧边栏表单时，开发者常会遇到表单提交按钮点击后无响应的情况。这通常是由于客户端HTML/JavaScript代码中的错误阻止了数据正确地传递给Apps Script后端函数。本教程将详细分析此类问题，并提供解决方案和最佳实践。

诊断与修复App Script侧边栏表单提交问题

当App Script侧边栏表单的提交功能无法正常工作时，问题通常出在以下几个关键区域：HTML结构、客户端JavaScript逻辑以及Apps Script后端函数的参数接收。

1. HTML结构与脚本放置

一个常见的错误是HTML元素的结构不正确，或者JavaScript脚本放置在不恰当的位置。

问题点：

脚本位置不佳： 将<script>标签放置在<head>部分可能会导致脚本在DOM元素完全加载之前尝试访问它们，从而引发错误。
HTML标签闭合错误： 错误的</div>标签闭合位置会破坏页面的布局，甚至导致某些元素无法被正确识别或交互。

解决方案： 建议将所有与DOM交互的JavaScript代码放置在<body>标签的末尾，这样可以确保在脚本执行时，所有相关的HTML元素都已加载并可用。同时，仔细检查HTML标签的嵌套和闭合，确保结构完整且语义正确。

示例（优化后的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">
            <input type="button" value="Submit" onclick="SubmitRecord()" class="btn btn-primary" />
          </div>
        </div>
      </div> <!-- 确保此div正确闭合表单内容容器 -->
    </form>

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

    <!-- 所有的JavaScript脚本应放置在<body>标签的末尾 -->
    <script>
      // ... 客户端JavaScript代码 ...
      // 例如：GetKlasifikasi(); 的调用也应在此处
    </script>
  </body>
</html>

登录后复制

2. 客户端JavaScript逻辑错误

客户端JavaScript (SubmitRecord 函数) 是连接HTML表单和Apps Script后端的核心。此处的任何逻辑错误都可能导致提交失败。

问题点：

变量赋值错误： 最常见的错误之一是变量名重复声明并错误赋值。例如，代码中存在 var kode_unitcipta = document.getElementById("kode_unitcipta").value; 之后又跟着 var kode_unitcipta = document.getElementById("uraian").value;。这会导致 kode_unitcipta 变量的值被 uraian 字段的值覆盖，从而向后端传递错误的参数。
DOM元素ID拼写错误： document.getElementById() 中的ID与HTML中的实际ID不匹配。
google.script.run 调用参数不匹配： 传递给 google.script.run 的参数数量或顺序与Apps Script后端函数（例如 AddRecord）的定义不一致。

解决方案：

仔细检查变量声明和赋值： 确保每个表单字段的值都赋给了唯一的、正确的JavaScript变量。避免重复声明同名变量。
验证DOM元素ID： 确保HTML中所有 id 属性与JavaScript中 document.getElementById() 调用中的字符串完全匹配。
核对 google.script.run 参数： 确保 google.script.run.AddRecord(...) 中传递的参数数量、顺序和类型与Apps Script后端 function AddRecord(...) 的定义完全一致。

示例（优化后的SubmitRecord函数）：

// HTML中的脚本部分
<script>
function SubmitRecord() {
  document.getElementById("displayReturn").innerHTML = "";

  // 确保每个变量名唯一且正确获取对应的DOM元素值
  var nomor = document.getElementById("nomor").value;
  var klasifikasi = document.getElementById("klasifikasi").value;
  var kode_unitcipta = document.getElementById("kode_unitcipta").value; // 正确获取 kode_unitcipta
  var uraian = document.getElementById("uraian").value; // 正确获取 uraian，不再覆盖 kode_unitcipta
  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;

  // 调用后端Apps Script函数，确保参数顺序和数量匹配
  google.script.run
    .withSuccessHandler(returnBack)
    .withFailureHandler(function(error) { // 增加withFailureHandler进行错误处理
      document.getElementById("displayReturn").innerHTML = "<span style=\"font-weight: bold; color: red\">提交失败: " + error.message + "</span>";
      console.error("Apps Script调用失败:", error);
    })
    .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.run.withSuccessHandler(function(ar) {
    var klasifikasi = document.getElementById("klasifikasi");
    console.log(ar);

    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    klasifikasi.appendChild(option);

    ar.forEach(function(item, index) {
      let option = document.createElement("option");
      option.value = item[1];
      option.text = item[0];
      klasifikasi.appendChild(option);
    });
  }).getAllKlasifikasi();
};

// 在DOM加载后调用初始化函数
GetKlasifikasi();
</script>

登录后复制

3. Apps Script后端函数 (.gs 文件)

虽然问题通常出在客户端，但也需要确保Apps Script后端函数能够正确处理接收到的数据。

表单大师AI

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

查看详情

验证点：

函数签名： 确保 AddRecord 函数的参数列表与客户端 google.script.run 调用时传递的参数数量和顺序完全一致。
数据处理逻辑： 检查数据验证、写入Google Sheets等逻辑是否正确无误。

示例（Apps Script代码）：

function AddArsipForm() {
  var form = HtmlService.createHtmlOutputFromFile('Arsip').setTitle('TAMBAH ARSIP');
  SpreadsheetApp.getUi().showSidebar(form);
}

function addMenu() {
  var menu = SpreadsheetApp.getUi().createMenu('Custom');
  menu.addItem('Tambah Arsip', 'AddArsipForm');
  menu.addToUi();
}

function onOpen(e) {
  addMenu();
}

function 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) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName("Data");
  // 确保所有参数都被正确接收并用于数据验证
  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\" >Data telah terekam!</span>";
  } else {
    return "<span style=\"font-weight: bold; color: red\" >Data Belum Lengkap</span>";
  }
}

function getAllKlasifikasi() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var klasifikasiSheet = ss.getSheetByName("KODE KLASIFIKASI");
  var [headers, ...data] = klasifikasiSheet.getDataRange().getValues();
  return data;
}

登录后复制

注意事项与调试技巧

使用浏览器开发者工具：
- 按下 F12 打开浏览器开发者工具。
- 在 Console (控制台) 标签页中查看是否有JavaScript错误信息。这些错误通常能直接指出客户端脚本的问题。
- 在 Network (网络) 标签页中，当 google.script.run 调用Apps Script函数时，会有一个 POST 请求发送到 script.google.com。检查这个请求的状态和响应，可以帮助判断请求是否成功发送以及Apps Script返回了什么。
使用Apps Script执行日志：
- 在Apps Script编辑器中，点击执行 -> 我的执行，可以查看Apps Script函数的执行日志。
- 在Apps Script代码中使用 Logger.log() 语句来输出变量值或执行流程，这对于调试后端逻辑非常有用。
一致的缩进和代码风格： 保持代码的整洁和一致的缩进可以大大提高代码的可读性，从而更容易发现结构和逻辑错误。

参数传递策略： 当需要传递大量参数时，考虑将所有参数封装到一个JavaScript对象中，然后将该对象作为单个参数传递给Apps Script函数。这样可以减少参数顺序出错的风险，并提高代码的维护性。

客户端JS:

var formData = {
  nomor: document.getElementById("nomor").value,
  klasifikasi: document.getElementById("klasifikasi").value,
  // ... 其他字段
};
google.script.run.withSuccessHandler(returnBack).AddRecord(formData);

登录后复制

Apps Script GS:

function AddRecord(formData) {
  var nomor = formData.nomor;
  var klasifikasi = formData.klasifikasi;
  // ... 使用 formData.fieldName 访问数据
}

登录后复制

错误处理： 始终在 google.script.run 调用中包含 withFailureHandler，以便在Apps Script函数执行失败时能够捕获并显示错误信息，这对于调试至关重要。

总结

解决App Script侧边栏表单提交问题，需要从HTML结构、客户端JavaScript逻辑和Apps Script后端函数三个层面进行全面检查。重点关注HTML元素的正确闭合与脚本的放置位置，仔细核对JavaScript中DOM元素ID的获取和变量赋值，尤其是避免重复声明和覆盖变量。同时，确保 google.script.run 的参数与后端函数签名精确匹配，并利用浏览器开发者工具和Apps Script执行日志进行高效调试。遵循这些最佳实践，可以显著提高开发效率，并确保表单提交功能的稳定运行。

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