Question

我正在尝试使用GAS HtmlService为电子表格构建UI。下面的HTML是一个非常简单的表单，其中包含一个文本框，可以成功地从工作表中提取值（“Kristina”）。但是，当我尝试提交表单时，Chrome中会打开一个新标签，尝试使用“xxxx”替换更多随机字母打开“bffc95ee-ff64-4d2c-xxxx-19d9824eb4b4.foo.bar/?fname=Kristina”网址和数字（以防万一）。我的代码中没有使用“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网址。

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

Answer 1

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

Answer 2

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

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

Code.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检索（以引用表单）。

还有其他方法 - 请参阅Get value of html text box in Apps Script function了解其他方法。

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

Answer 3

只需将其添加到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 Service: Communicate with Server Functions

HtmlService表单提交打开带有foo bar URL的新选项卡

3 个答案:

Code.gs

中将Html.HTML