将侧边栏中的 html 表单中的值传递给 google 脚本答案

【问题标题】：Pass value from an html form in sidebar to google script将侧边栏中的 html 表单中的值传递给 google 脚本
【发布时间】：2017-11-14 03:04:27
【问题描述】：

我在这方面遇到了困难...我阅读了文档，但我无法做到。

我想在 Google 文档的边栏中创建一个小 html 表单。此表单将从联系人中提取联系人组，以便用户可以选择一个并将 t 传递给我的脚本。

这就是我所做的：

页面.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
  </body>
</html>

menu.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Page')
      .evaluate();
}

function onOpen() {
  DocumentApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Custom Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();

}

function showSidebar() {

  var html = HtmlService.createHtmlOutputFromFile('Page')
      .setTitle('Chose the Contact Group')
      .setWidth(300);

  var groups = ContactsApp.getContactGroups();

  // add this to the html file Page.html
  html.append ('<form onsubmit="google.script.run.myFunction(formObject)">'+
               '<select>');

  for (var i = 0; i < groups.length; i++) {
    html.append('<option name="chosenGroup" value="' + groups[i].getName() + '">' + groups[i].getName() + '</option>');
  }

  html.append('</select><input type="submit">');

  //this is commented because I was testing it
  //html.append("<script>function handleFormSubmit(formObject) { google.script.run.myFunction(formObject); } </script>");

    DocumentApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);

}

代码.gs

myFunction (formObject) {

Logger.log(formObject.chosenGroup);

}

当我点击提交按钮时，会打开一个新的空白页面，其网址如下：

https://n-wuewuewuee98efgdsf98769s8d76f9s76df-0lu-script.googleusercontent.com/userCodeAppPanel?

【问题讨论】：

标签： google-apps-script google-docs

【解决方案1】：

这是因为 'form' 标签的 'action' 属性。当您提交表单时，浏览器将重定向到“action”属性中指定的路由。通常，此 URL 模式映射到服务器上接收表单发布的数据的代码。

您的代码中还有其他问题应首先解决：

1) 仅当您将脚本部署为 Web 应用程序时才需要 doGet() 函数。 doGet() 中的代码在您在浏览器中打开该应用程序的 URL 时执行，即向该应用程序发送一个“GET”请求。您的脚本是文档绑定的，因此不需要 doGet()

2) 分离业务逻辑的各个方面。 showSideBar() 必须做它应该做的事情，即显示侧边栏。 getContactGroups() 必须返回联系人组数组等。

3) 请记住，您可以将变量传递给 HTML 页面并使用模板化 HTML 动态创建 UI。无需逐行追加！ https://developers.google.com/apps-script/guides/html/templates

4) 最后，使用 jQuery 可以轻松解决重定向到另一个页面的问题。

请参阅下面的示例代码。我的脚本是电子表格绑定的，所以您只需将 SpreadsheetApp 替换为 DocumentApp。

服务器代码（main.gs）

function onOpen(){

var ui = SpreadsheetApp.getUi();

ui.createMenu('Menu')
  .addItem('Show sidebar', 'showSidebar')
  .addToUi();


}


function showSidebar() {

var ui = SpreadsheetApp.getUi();
var template = HtmlService.createTemplateFromFile('sidebar');

template.contactGroups = getContactGroups(); //adding contactGroups as a property of the template object. 

ui.showSidebar(template.evaluate()); //Calling evaluate() executes the inline JS code in sidebar.html, populating the dropdown list


}

function getContactGroups(){

try {

var contactGroups = ContactsApp.getContactGroups();

} catch(error) {

Logger.log(error);

}

return contactGroups;

}

function processFormResponse(formObject){


Logger.log(formObject.chosenGroup);



}

这里是sidebar.html。请注意 html 文件中内联代码的特殊语法。调用 e.preventDefault() 负责重定向到另一个页面。由于我们将contactGroups 作为属性添加到模板对象中，因此在调用evaluate() 时该变量将可用。下面的内联代码将使用组名动态填充下拉列表。

<!DOCTYPE html>
    <html>
      <head>
        <base target="_top">
      </head>
      <body>
        Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />

        <form>
        <select name="chosenGroup">

        <? for (var i=0; i < contactGroups.length; i++) { ?>

        <option value="<?= contactGroups[i].getName()?>"><?= contactGroups[i].getName()?></option>


        <?}?>
        </select>
        <input type="submit" value="Submit">
        </form>



       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
       <script>

        $(document).ready(function(){

              $('form').submit(function(e){

                e.preventDefault();

                google.script.run.processFormResponse(this);


              });


        });

       </script>


      </body>
    </html>

更新

jQuery 没有什么特别之处。它是一个 JS 库，旨在使 DOM 树的导航更容易一些，但它构建在浏览器中相同的 DOM API 之上。长话短说，你不需要 jQuery 来实现这个结果。 1）为您的“表单”标签分配一个唯一的ID，例如

<form id="form">

2) 创建一个函数，将事件侦听器添加到表单以侦听“提交”事件。第二个参数是事件处理函数。使用“点击”而不是“提交”将强制您通过按 id 引用文本字段并获取用户输入来手动创建表单对象。

   <script>
      function addEventListeners() {

       document.getElementById('form').addEventListener('submit', function(e){

       e.preventDefault();
       google.script.run.processFormResponse(this);


       });



       }
      </script>

最后，在加载时调用这个函数。

<body onLoad="addEventListeners()">

我之前示例中的 jQuery 代码做了完全相同的事情，但更易读且易于维护。

【讨论】：

谢谢 Anton，它是否有效，但我不明白为什么我们需要 jquery，无法添加“google.script.run.processFormResponse(this);”在一个onlick？但也许我误解了这个页面：developers.google.com/apps-script/guides/html/…（用于网络应用程序而不是表单绑定脚本，对吧？）