Google Apps 脚本 HTML 表单不会提交答案

【问题标题】：Google Apps Script HTML Form Won't SubmitGoogle Apps 脚本 HTML 表单不会提交
【发布时间】：2017-02-05 23:02:11
【问题描述】：

首先，我将向您提供代码并简要说明我要完成的工作。

代码.gs

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu("Custom Menu")
      .addItem("Show sidebar", "showSidebar")
      .addToUi();
}

function doGet() {
  return HtmlService.createHtmlOutputFromFile("entry");
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile("entry")
      .setTitle("My custom sidebar")
      .setWidth(300);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
}

function EnterData(fobject) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Sheet1");
  sheet.activate();

    ss.toast("Something Happened");

  var range = sheet.getRange(1, 1);
  range.setValue("It worked");
}

function ProgramSuccess() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  ss.toast("Program Run Complete");
}

entry.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent form from submitting
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function FormSubmit(formObject) {
        google.script.run.withSucessHandler(FormSuccess).EnterData(formObject);
      }
      function FormSuccess() {
        google.script.run.ProgramSuccess;
        google.script.host.close();
      }
    </script>
  </head>

  <body>
    <form id="entryForm" onsubmit="FormSubmit(this)">
      Name:<br>
      <input type="text" name="name">
      <br>
      Client Name:<br>
      <input type="text" name="clientname">
      <br><br>
      <input type="submit" value="Submit">
      <input type="reset">
    </form>
  </body>
</html>

该程序的目的是在 google 工作表中打开一个侧边栏，该工作表显示一个带有表单（标签）的 html 页面。然后，当您单击 html 侧边栏中的提交时，它应该运行 Code.gs 中的EnterData 函数。我的问题是这个函数没有运行，当我点击提交按钮时没有任何反应。

对此的任何帮助将不胜感激。

【问题讨论】：

标签： javascript html google-apps-script

【解决方案1】：

试试这个：

entry.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent form from submitting
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function FormSubmit() {
        google.script.run.withSucessHandler(FormSuccess).EnterData(document.getElementById("entryForm"));
      }
      function FormSuccess() {
        google.script.run.ProgramSuccess;
        google.script.host.close();
      }
    </script>
  </head>

  <body>
    <form id="entryForm">
      Name:<br>
      <input type="text" name="name">
      <br>
      Client Name:<br>
      <input type="text" name="clientname">
      <br><br>
      <input type="submit" value="Submit" onclick="FormSubmit()">
      <input type="reset">
    </form>
  </body>
</html>

另外，我不明白您为什么要将 "entryForm" 对象传递给 EnterData 函数，因为您似乎没有使用它。

【讨论】：

我计划使用用户输入表单的值，如下所示：range.setValue(fObject.name); 我在您的编辑中添加了，但似乎我仍然无法让 HTML 调用服务器-副功能。
您在文件 entry.html 中出现拼写错误。它应该是 google.script.run.withSuccessHandler 而不是 google.script.run.withSucessHandler。
哇哦！谢谢你。我猜你可以阅读你的代码 10 次，但仍然找不到最简单的错误
一开始就发生在每个人身上。下次在处理任何使用 HTML 的用例时，请尝试使用浏览器中的 Inspect Element 选项并在控制台中查找错误。 99% 的时间您都可以自己解决错误。
感谢您的建议。我对使用 HTML 还是很陌生，所以我一定会继续尝试这样做