Google apps script HtmlService表单提交打开带有foo-bar URL的新选项卡_Google Apps Script_Google Sheets

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

google-apps-script google-sheets

Google apps script HtmlService表单提交打开带有foo-bar URL的新选项卡,google-apps-script,google-sheets,Google Apps Script,Google Sheets,我正在尝试使用GAS HtmlService为电子表格构建UI。下面的HTML是一个非常简单的表单，只有一个文本框，可以成功地从表单中提取一个值（“Kristina”）。但是，当我尝试提交表单时，Chrome会打开一个新选项卡，试图打开URL“bffc95ee-ff64-4d2c-xxxx-19d9824eb4b4.foo.bar/？fname=Kristina”，并用“xxxx”替换更多随机字母和数字（以防万一）。在任何时候我都不会在代码中使用“foo.bar”这个词，所以我很确定这部分不是我

我正在尝试使用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>

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

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

但它似乎没有这样做，因为表单没有关闭，msgBox也没有出现。在新选项卡中仅显示foo bar URL

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

项目触发器

onFormSubmit（）

将通过提交触发。这个触发器和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 这是对原始文档的修改，与文档中的模式相呼应。表单提交成功处理程序是一行程序，用于关闭对话框。一旦完成，服务器端函数将与表单内容一起调用，使用

this.parentNode

（参考表单）检索

还有其他方法-请参阅以了解不同的方法

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


//成功关闭窗体
函数close（）{google.script.host.close（）；}
名字
项目触发器onFormSubmit（）
将由通过的提交触发。这个触发器和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
这是对原始文档的修改，与文档中的模式相呼应。表单提交成功处理程序是一行程序，用于关闭对话框。一旦完成，服务器端函数将与表单内容一起调用，使用this.parentNode
（参考表单）检索
还有其他方法-请参阅以了解不同的方法
<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>


//成功关闭窗体
函数close（）{google.script.host.close（）；}
名字
您不能在google.script.run中使用真正的“提交”按钮（这是《用户指南》中记录的限制）。将其更改为“按钮”，应该可以正常工作。
您不能在google.script.run中使用真正的“提交”按钮（这是《用户指南》中记录的限制）。将其更改为“按钮”，应该可以正常工作。
只需将其添加到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);

//阻止表单提交。
函数preventFormSubmit（）{
var forms=document.queryselectoral（'form'）；
对于（var i=0；i

来源：
只需将其添加到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);

//阻止表单提交。
函数preventFormSubmit（）{
var forms=document.queryselectoral（'form'）；
对于（var i=0；i

来源：
是否会触发表单提交事件？同意。如果HTMLService有一个触发器，它会很方便。它会在Submit事件中触发表单吗？同意。如果HTMLService有一个触发器的话，它会很方便的。为延迟道歉。回到这里。谢谢你的全面解释。当然，你的解决方案是有效的，我是对的，这是一个令人尴尬的错误。我已经一次又一次地浏览文档，尝试各种不同的组合，但不幸的是，我从未联系到onFormSubmit触发器是用于表单服务而不是Html服务的。再次感谢您抽出时间。对耽搁表示歉意。回到这里。谢谢你的全面解释。当然，你的解决方案是有效的，我是对的，这是一个令人尴尬的错误。我已经一次又一次地浏览文档，尝试各种不同的组合，但不幸的是，我从未联系到onFormSubmit触发器是用于表单服务而不是Html服务的。再次感谢您抽出时间。