0

我正在尝试使用 GAS HtmlService 为电子表格构建 UI。下面的 HTML 是一个非常简单的表单，其中包含一个文本框，可以成功地从工作表中提取一个值（“Kristina”）。但是，当我尝试提交表单时，会在 Chrome 中打开一个新选项卡，尝试打开 URL“bffc95ee-ff64-4d2c-xxxx-19d9824eb4b4.foo.bar/?fname=Kristina”，用“xxxx”替换更多随机字母和数字（以防万一）。我在任何时候都不会在我的代码中使用“foo.bar”这个词，所以我很确定那部分不是来自我。每次或注销并重新登录后它都不会改变。我在两台不同的计算机上得到相同的结果。

<html>
<body>
  <div>
    <form id="formtest1">
      <label>First Name</label>
      <input name="fname" type="text" maxlength="255" value="<?= fname ?>"/>
      <input type="submit" value="Submit" 
          onclick="google.script.run.processForm(document.getElementById('formtest1'));
          google.script.host.close()"/>
    </form>
  </div>
</body>
</html>

以上内容正在使用以下函数显示：

function htmltest(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sht = ss.getActiveSheet();
  var html = HtmlService.createTemplateFromFile("HTML");
  html.fname = sht.getRange(2, 3).getValue();
  ss.show(html.evaluate());
};

如果我理解正确，HTML 中的“google.script.run.processForm(...)”脚本应该触发以下函数，如项目触发器中设置的那样：

function onFormSubmit(){
Browser.msgBox("Test");
};

但它似乎没有这样做，因为表单没有关闭并且 msgBox 没有出现。只有新选项卡中的 foo bar URL。

希望我已经清楚地解释了这个问题，并且没有犯令人尴尬的错误。

4

3 回答 3

2

您不能在 google.script.run 中使用真正的“提交”按钮（这是用户指南中记录的限制）。将其更改为“按钮”，它应该可以正常工作。

于 2013-05-17T06:14:00.890 回答
1

项目触发器onFormSubmit()将由通过Forms Service提交的内容触发。此触发器与您的 HTML 代码之间没有任何关系；它们是与用户交互的两种不同方式。

html 表单模式显示在此处的 HTML 服务文档中，下面的脚本是对它的改编。

代码.gs

与您的原始文件相比，唯一真正的变化是onFormSubmit()已替换为processForm(form)，其中包含一个参数，用于将从 html 代码传递的对象。

function onOpen() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var entries = [{
    name : "htmltest",
    functionName : "htmltest"
  }];
  sheet.addMenu("Custom Menu", entries);
};

function htmltest(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sht = ss.getActiveSheet();
  var html = HtmlService.createTemplateFromFile("HTML");
  html.fname = sht.getRange(2, 3).getValue();
  //Logger.log( html.getCodeWithComments() );
  ss.show(html.evaluate());
};

function processForm(form){
  var fname = form.fname;
  Browser.msgBox("Test - " + fname);
};

HTML.html

这是对原始文件的修改，与文档中的模式相呼应。表单提交 SuccessHandler 是单行的，它关闭对话框。完成后，将使用表单内容调用服务器端函数，并使用this.parentNode（以引用表单）进行检索。

还有其他方法 - 请参阅在 Apps 脚本函数中获取 html 文本框的值以了解不同的方法。

<html>
<script type="text/javascript">
  // SuccessHandler to close form
  function close() {google.script.host.close();}
</script>
<body>
  <div>
    <form>
      <label>First Name</label>
      <input name="fname" type="text" maxlength="255" value="<?= fname ?>"/>
      <input type="button" value="Submit" onclick="google.script.run
                                                   .withSuccessHandler(close)
                                                   .processForm(this.parentNode)"/>
    </form>
  </div>
</body>
</html>
于 2013-05-17T03:45:24.213 回答
1

只需将其添加到您的 html 文件中的脚本标记。

// Prevent forms 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);

来源：HTML 服务：与服务器功能通信

于 2017-02-02T14:55:58.237 回答