简体   繁体   English

Google Apps脚本HTML表单无法提交

[英]Google Apps Script HTML Form Won't Submit

First I will provide you with the code and briefly explain what it is I am trying to accomplish. 首先,我将为您提供代码并简要说明我想要实现的目标。

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

The purpose of this program is to open a sidebar in a google sheet that displays an html page that has a form (tag). 此程序的目的是在Google工作表中打开一个侧边栏,显示一个带有表单(标记)的html页面。 Then when you click submit in the html sidebar, it should run the EnterData function in Code.gs. 然后当你在html侧边栏中点击提交时,它应该在EnterData中运行EnterData函数。 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. 任何有关这方面的帮助将不胜感激。

Try this: 尝试这个:

entry.html 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>

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. 另外,我不明白为什么你将“entryForm”对象传递给EnterData函数,因为你似乎没有使用它。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM