Google Apps Script HTML 表单无法提交

问题描述:

首先,我将提供代码并简要说明我要实现的目标.

First I will provide you with the code and briefly explain what it is I am trying to accomplish.

Code.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>

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

The purpose of this program is to open a sidebar in a google sheet that displays an html page that has a form (tag). Then when you click submit in the html sidebar, it should run the EnterData function in Code.gs. My problem is that this function is not being ran and nothing happens when I click the submit button.

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

Any help on this would be greatly appreciated.

试试这个:

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 函数,因为您似乎没有使用它.

Also, i did not understand why are you passing the "entryForm" object to the EnterData function because you don't seem to be making use of it.