使用应用程序脚本提交表单答案

【问题标题】：Submit Form with apps script使用应用程序脚本提交表单
【发布时间】：2019-07-19 06:03:48
【问题描述】：

我遇到了Google Script - Sidebar button keeps opening a new tab 中描述的问题。我最初使用的是：

   <input type="submit" value="Submit" />

但在提交创建新标签时遇到了问题，如该问题中所述。我试图改变帖子中讨论的方法：

<button type='button'>

但这会导致按钮无法点击：

现在我把它改回了：

<input type="submit" value="Submit" />

现在我可以在单击时关闭表单，但当我检查日志时，表单似乎没有向服务器端提交任何内容，但在服务器端没有看到任何提交内容。

我怎样才能让它工作并提交表单？整个模板如下，应该是独立的：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
    <script>
      // Prevent forms from submitting.
      function preventFormSubmit() {
        var forms = document.querySelectorAll('forms');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function handleFormSubmit(formObject) {
        google.script.run
          .withSuccessHandler(google.script.host.close())
          .processRowPopupHTML(formObject);
      }

      function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">Sent!</a>';
      }
    </script>
  </head>

  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <div id="texts"></div>

      <div>
        <label for="optionList">Click me</label>
        <select
          id="optionList"
          ondblclick="addText(event)"
          name="optionList"
          size="5"
        >
        </select>
      </div>

      <br />

      <br />

      <div>
        <textarea id="message" name="message" rows="10" cols="30"></textarea>
      </div>
      <div id="textboxes"></div>

      <div id="insert"></div>

      <input type="submit" value="Submit" />
    </form>


    <div id="output"></div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
    <link
      href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css"
      rel="stylesheet"
    />

    <script>
      //  var canned = <?= canned ?>; //PASSED IN JSON
      var mycannedObj = ['hi', 'hi', 'hi', 'hi', 'hi'];

      function addText(event) {
        var targ = event.target || event.srcElement;
        document.getElementById('message').value +=
          ' ' + targ.textContent || targ.innerText + ' ';
      }

      function buildOptionList(options, elementId) {
        var list = $('#' + elementId);

        list.empty();
        for (var i = 0; i < options.length; i++) {
          console.log(options[i]);
          list.append(
            '<option value="' +
              options[i].toLowerCase() +
              '">' +
              options[i] +
              '</option>'
          );
        }
      }

      (function() {
        buildOptionList(mycannedObj, 'optionList');
      })();
    </script>
  </body>
</html>

编辑：

将代码更改为：

google.script.run.withSuccessHandler(google.script.host.close).processRowPopupHTML(formObject);

然后单击按钮，我再次打开了一个新标签：

https://n-g6b................tas763ea-0lu-script.googleusercontent.com/userCodeAppPanel?optionList=hi&message=+hi

控制台显示：

我明白了：

[19-02-25 17:05:06:900 PST] {optionList=hi, message= hi}

在日志中，正如预期的那样，这很好。但是如何阻止标签页打开呢？

【问题讨论】：

与上一个几乎相同的问题一样，您将函数调用的 result of 分配为成功处理程序，而不是 function 被称为。还有this question of yours——它和这个有什么区别？还是您只是重新询问？
@tehhowch ，我决定清理并总结最后一个问题，因为我的代码有几处更改，我觉得其他人可能很难理解。我还重新设计了模板，因此它现在是完整且独立的，并且删除了与此问题无关的代码。这样其他人无需修改即可试用。
@tehhowch，关于“您将函数调用的结果分配为成功处理程序，而不是要调用的函数。” - 你的意思是改变 google.script.run.withSuccessHandler(google .script.host.close()).processRowPopupHTML(formObject);到 google.script.run.withSuccessHandler(google.script.host.close).processRowPopupHTML(formObject); ?

标签： html forms google-apps-script web-applications

【解决方案1】：

您可能会收到“不安全导航”警告，因为从withSuccessHandler 传递到google.script.host.close 的其他未指定参数。在提供成功处理程序时，如果它们不是您自己的函数（即您确切知道它们采用和使用的参数），您最好在匿名函数中访问它们：

...
google.script.run
  .withSuccessHandler(() => google.script.host.close())
  .withFailureHandler(unhandledServersideException => console.log(unhandledServersideException))
  .foo();
...

如果您不想在 HTML 文件中使用箭头语法，那就是

withSuccessHandler(function () { google.script.host.close(); })

通过这种方式，您可以确保无论foo 的输出是什么，它都不会传递给google.script.host.close

【讨论】：

谢谢，我试过了，没有任何变化——同样的错误仍然存在。我确实将更改为并且这会停止弹出选项卡，所以总的来说它现在正在工作。

【解决方案2】：

问题：

forms 不是有效的 CSS 选择器或节点名称。因此，preventDefault() 永远不会附加到 load 上的 form 提交事件。

解决办法：

替换

document.querySelectorAll('forms');

与

document.querySelectorAll('form');

参考资料：

【讨论】：