我如何从 google apps 脚本 Web 应用程序 html 表单中获取数据?

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

最近我一直在携手合作谷歌应用程序脚本、谷歌网站和谷歌表格。我最近的项目一直在尝试从谷歌站点网站获取输入,并使用谷歌应用程序脚本网络应用程序将其输入到谷歌表中。我一直在研究如何做到这一点,我被告知我可以像在普通 html 中一样获取数据,但是当我这样做并将其输出到工作表时,那里不会弹出任何内容,因为网络应用程序是与编辑器分离我无法查看任何类型的控制台日志。知道我如何能够使其采用表单输出并将其设置为一个变量,然后我可以插入到谷歌表中吗?

到目前为止,我已经能够创建我的 html 表单并将其输出到网络应用程序中,这样在执行时就会弹出表单,一旦按下提交按钮,页面就会加载到一个新的空白表单中,但是没有输出在工作表或执行日志历史记录中的数据。我确实在工作表中看到了一个新光标,它确认了所需单元格的打开和选择,但没有数据最终出现在那里。到目前为止,这是我的代码:

Javascript:

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('register'); 
}

function submitForm(e) {
  var userInputForm = e.document.querySelectorAll('userInput');
  var userInputData = userInputForm.innerHTML;
  console.log(userInputData);
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName(ROSTER);
  var range = sheet.getRange("A3:A3");
  range.setValues(userInputData);
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm">

    <input type="text" id="userInput" placeholder="Enter Username">
    <input type="text" id="discordInput" placeholder="Enter Discord Username">

    <button type="submit">Register</button>

    </form>
  </body>
</html>

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

从 Google Apps 脚本网络应用程序获取数据

要从网络应用程序表单中获取数据,您可以使用这种方法,它使用

google.script.run
类将数据从网络应用程序 html 提交到
apps script file
,然后应用程序脚本文件将数据传递到 Google 表格。

代码中的另一个错误是行

var sheet = spreadsheet.getSheetByName(ROSTER);
工作表名称应该是字符串,因此应该是
var sheet = spreadsheet.getSheetByName("ROSTER");

应用程序脚本

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('register')
}

function submitForm(formData) {
  var userInput = formData.userInput;
  var discordInput = formData.discordInput;
  
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName("ROSTER");
  var range = sheet.getRange("A3");
  range.setValue(userInput);
}

HTML

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <form id="myForm" onsubmit="handleSubmit(event)">
    <input type="text" name="userInput" id="userInput" placeholder="Enter Username" required>
    <input type="text" name="discordInput" id="discordInput" placeholder="Enter Discord Username">
    <button type="submit">Register</button>
  </form>

  <script>
    function handleSubmit(event) {
      const form = document.getElementById('myForm');
      const formData = new FormData(form);
      const data = Object.fromEntries(formData.entries());

      google.script.run.withSuccessHandler(function(response) {
        console.log('Data submitted successfully:', response);
      }).submitForm(data);
    }
  </script>
</body>
</html>

参考文献:类 google.script.runApps 脚本 Web 应用程序数据传输

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