Google Appscript VLookup 并输出到 html

问题描述 投票:0回答:1

所以我有这个 html 表单,只有一个字段“studentID”

<div class="grid">
    <div class="row">
        <form id="idChecker">
        <div class="form-group">
        <label>ID studente</label>
        <input name="studentId" type="text" placeholder="Inserisci ID Studente" class="metro-input" />
        </div>
         <div class="form-group">
        <button class="button success">Check ID</button>
        </div>
        </form>
    </div>
    </div>

我需要表单按钮来触发功能:

  1. 将 ID 和时间戳记录在名为“Log”的工作表上,我将此函数acceptData 放置在我的 code.gs 中,并且运行良好:
function acceptData(formData){
  console.log(formData)
  formData.studentId

  const ss = SpreadsheetApp.getActiveSpreadsheet()
  const ws = ss.getSheetByName("Log")
  ws.appendRow([Date(),formData.studentId])
  
}
  1. 在同一文档的另一个工作表(“数据库”)中执行 VLOOKUP,并在 html 页面上返回找到的值作为表单的确认消息。

所以基本上,当有人输入学生 ID 并提交表单时,它应该返回与该 ID 相关的学生姓名,同时记录该 ID 已被搜索的事实。

希望你能帮我解决VLOOKUP的问题。

javascript html google-sheets google-apps-script webforms
1个回答
0
投票

$(document).ready(function() {
  $('#idChecker').submit(function(event) {
    event.preventDefault(); // Prevent the form from being submitted automatically
    var formData = {
      'studentId': $('input[name=studentId]').val()
    };
    
    // Call the acceptData() function from Google Apps Script
    google.script.run.withSuccessHandler(function(studentName) {
      // Create the confirmation message using the returned student name
      var confirmationMessage = "Student not found.";
      if (studentName !== "Student not found") {
        confirmationMessage = "Student name: " + studentName;
      }
      $('#confirmationMessage').text(confirmationMessage);
    }).acceptData(formData);
  });
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student ID Checker</title>
  <!-- Include jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="grid">
    <div class="row">
      <form id="idChecker">
        <div class="form-group">
          <label for="studentId">Student ID</label>
          <input name="studentId" type="text" placeholder="Enter Student ID" class="metro-input" />
        </div>
        <div class="form-group">
          <button class="button success">Check ID</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Area to display confirmation message -->
  <div id="confirmationMessage"></div>

  <!-- Include JavaScript file containing Google Apps Script functions -->
  <script src="https://script.google.com/macros/s/AKfycbycGBJLx_Q1eJDitpHwQ2PV-ZIamjg3i4tNmV8WbeE/exec"></script>
</body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.