1

我在使用 Google Apps Script HTML Service 时尝试使用 HTML5 表单验证。正如另一位用户所问，根据文档示例，您必须使用按钮输入而不是提交输入。使用提交按钮似乎可以进行验证，但无论如何都会调用服务器函数。给该用户的答案对我不起作用。另外，我想在提交表单时调用两个函数，这会使它变得更复杂。

这就是我想要做的：用户填写表格，我生成一个 Google Doc 并给他 url。当他单击提交按钮时，我向他展示了一个带有漂亮微调器的 jQuery UI 对话框，上面写着“正在创建您的文档”。然后，当文档生成时，我给他链接。当 Google Doc 内容完成时，我使用成功处理程序来显示结果，但同时我需要一个函数来显示微调器。我不知道是否有比在 onclick 事件中添加另一个函数更好的方法来做到这一点，也许它可能会以某种方式破坏进程。如果表单无效（使用 HTML5 验证），有没有办法不调用任何这些函数？

这是我的代码的简化版本：

代码.gs

function generateDocument(formObject) {
  var doc = DocumentApp.create("Document name");
  ...
  return doc.getUrl();
}

页面.html

<main>
  <form id="myForm">
    ...
    <input type="button" value="Generate document" 
        onclick="showProgress();
            google.script.run
            .withSuccessHandler(openDocument)
            .generateDocument(this.parentNode);"/>
  </form>
  <div id="dialog-confirm" title="Your document">
    <div id="dialog-confirm-text"></div>
  </div>

Javascript.html

$( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: false, modal: true });

function showProgress() {
  $( "#dialog-confirm" ).dialog({ buttons: [ { text: "Cancel", click: function() { $( this ).dialog( "close" ); } } ] });
  $( "#dialog-confirm" ).dialog( "open" );
  $( "#dialog-confirm-text" ).html( "<br />Wait a second, your document is being generated...<br /><br /><img src='http://i.stack.imgur.com/FhHRx.gif' alt='Spinner'></img>" );
  return false;
}

function openDocument(url) {
  $( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: false, width: 400, buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
  $( "#dialog-confirm-text" ).html( '<br /><a href="' + url + '" target="_blank">Click here to open and print your document!</a>' );
  return false;
}

所有三个 HTML 文档都使用文档中推荐的 include 函数连接在一起（并使用其各自的标签）。

我是 jQuery 的新手，欢迎任何建议。

最后一个问题：对话框中的取消按钮将关闭它，但不会停止创建文档。是否可以停止此过程？我不这么认为。

非常感谢您提前。

4

2 回答 2

1

我知道这个答案已经很长时间了，但是我找到了一个简单的解决方案：

"<input type='submit' onclick='if(verifyForm(this.parentNode)===true){google.script.run.withSuccessHandler(YOUROUTPUT).YOURFUNCTION(this.parentNode); return false;}' value='Submit'></form>";

Javascript 端

 function verifyForm(){
  var elements = document.getElementById("myForm").elements;
  for (var i = 0, element; element = elements[i++];) {
    if (element.hasAttribute("required") && element.value === ""){
      resetInputs();
      return false;
    }
    if (element.hasAttribute("pattern")){
      var value = element.value;
      if(value.match(element.pattern)){
      }else{
        resetInputs();
        return false;
      }
    }
   }
   return true;
}

在 iOS 中调用窗口有时会出现问题，这就是我进一步调查的原因。

于 2020-08-25T01:56:10.697 回答
0

将函数调用移动到<form>元素；从提交输入元素中删除任何函数调用；并将中间 JavaScript 代码放入<script>标签中：

<input tabindex="9" type="submit" value="Save Input" id='idInputBtn'>


<form id="myInputForm" name="input" onsubmit="fncWriteInput(this)">

<script>
  window.fncWriteInput= function(argTheInfo) {
  // Do additional checks here if you want
  var everythingIsOk = . . . . . . . ;

  if (everythingIsOk) {
    google.script.run
      .withSuccessHandler(openDocument)
      .generateDocument(argTheInfo);
    };
  };

请注意，它this.parentNode被删除到函数调用的 arg 中，并且只this在函数参数中使用，因为函数是从<form>元素（即父元素）调用的。

如果有任何错误，表单将不会被提交，并且用户将收到一条错误消息。没有代码将运行。

这是伪代码，但我确实在我的应用程序中使用了这样的设置。但是使用开发者工具，你可以在你的浏览器中设置一个断点，并逐步遍历每一行来测试它，而不需要输入console.log语句。

于 2014-08-12T15:35:22.460 回答