Apps Script实现Google Sheet双输入查询表单无结果问题求助

我是一名学习Apps Script的学生，想要创建一个包含两个数字输入框（对应工作表A、B列）和提交按钮的表单。用户提交表单时，脚本需在当前Google Spreadsheet工作表中匹配输入的两个值，并返回对应行C列的结果，显示在表单下方。但目前输入值后无法得到预期结果，怀疑问题出在HTML的script标签中，但不确定。

现有代码 #

1. HTML文件（searchForm.html） #

<form onsubmit="handleFormSubmit(event)">
  <label for="inputA">height:</label><br>
  <input type="number" id="inputA" name="inputA"><br>
  <label for="inputB">weight:</label><br>
  <input type="number" id="inputB" name="inputB"><br>
  <input type="submit" value="Submit">
</form><br>
<script>
  function handleFormSubmit(event) {
    // Prevent the form from refreshing the page
    event.preventDefault();

    // Get the input values from the form
    var inputA = document.getElementById("inputA").value;
    var inputB = document.getElementById("inputB").value;

    // Search the Google Sheet for a matching row
    var sheet = SpreadsheetApp.getActiveSheet();
    var data = sheet.getDataRange().getValues();
    var result = "";
    for (var i = 0; i < data.length; i++) {
      if (data[i][0] == inputA && data[i][1] == inputB) {
        result = data[i][2];
        break;
      }
    }

    // Display the result on the page
    var resultContainer = document.getElementById("result");
    resultContainer.innerHTML = result;
  }
</script>
<label for="resultA">result is:</label><div id="result"></div>
<!-- Result will be added here -->

2. 脚本文件（Code.gs） #

function doGet(e) {
  return HtmlService.createTemplateFromFile('searchForm.html')
    .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

问题原因与修复方案 #

核心问题 #

HTML中的客户端脚本直接调用了服务端的SpreadsheetApp API——浏览器端的JS无法直接访问Google Apps Script的服务端接口，这是导致功能失效的根本原因。

修复步骤 #

1. 在服务端新增查询函数
   在Code.gs中添加处理表格查询的服务端函数，负责接收输入并匹配数据：

   function searchSheet(height, weight) {
     // 转换为数字类型，避免字符串与数字匹配失败
     const numHeight = Number(height);
     const numWeight = Number(weight);
     const sheet = SpreadsheetApp.getActiveSheet();
     const data = sheet.getDataRange().getValues();
     
     // 跳过表头（若表格第一行为表头）
     for (let i = 1; i < data.length; i++) {
       const rowHeight = data[i][0];
       const rowWeight = data[i][1];
       // 严格匹配数字
       if (rowHeight === numHeight && rowWeight === numWeight) {
         return data[i][2];
       }
     }
     return "未找到匹配结果";
   }
   

2. 修改客户端脚本调用服务端接口
   替换HTML中的<script>代码，通过google.script.run异步调用服务端函数：

   <script>
     function handleFormSubmit(event) {
       event.preventDefault();
       const inputA = document.getElementById("inputA").value;
       const inputB = document.getElementById("inputB").value;
       const resultContainer = document.getElementById("result");
       
       // 调用服务端查询函数，处理结果与错误
       google.script.run
         .withSuccessHandler(function(result) {
           resultContainer.innerHTML = result;
         })
         .withFailureHandler(function(error) {
           resultContainer.innerHTML = "查询出错：" + error.message;
         })
         .searchSheet(inputA, inputB);
     }
   </script>
   

3. 额外优化建议

   • 若表格无表头，将循环起始值改回i=0
   • 可在输入框添加必填校验，避免空值提交
   • 匹配逻辑可根据实际需求调整为模糊匹配（如范围匹配）

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