如果onsubmit函数的运行时间超过10秒，则HTML表单提交两次 [英] HTML form submits twice if the onsubmit function runs longer than 10 seconds

查看：156 发布时间：2020/11/10 4:51:59 javascript forms google-apps-script google-sheets form-submit

本文介绍了如果onsubmit函数的运行时间超过10秒，则HTML表单提交两次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我为此付出了整整一天的时间，发现的搜索结果都对我没有帮助.

I have lost an entire day fighting this and none of the search results I am finding are helping me.

我正在Google表格中编写脚本，并在Windows 10 OS上使用Chrome浏览器.我至少需要在Chrome中运行它，因为我公司的大多数人都使用Chrome.

I am writing script in Google Sheets and using Chrome browser on Windows 10 OS. I need this to run in Chrome at minimum because most of my company uses Chrome.

当我的代码完全生效时，一切正常，但是html表单中的onsubmit操作调用了gs TWICE中的函数，我不知道为什么.

When my code is in full force, everything works fine but the onsubmit action in my html form calls the function in my gs TWICE and I can't figure out why.

我所看到的是；不管我的html文件或gs函数中的内容是什么，如果我的函数执行需要十秒钟或更长时间，那么它将被第二次调用.怎么会这样我在做什么错了?

What I am seeing is; regardless of content in my html file or gs function, if my function takes ten seconds or longer to execute then it is called a second time. How could this be? What am I doing wrong?

一步一步，这就是我在做什么和会发生什么.

Step by step, here is what I am doing and what happens.

首先，通过附加菜单，我调用初始函数，该函数会生成包含表单的HTML模型窗口.

First, via add-on menu, I call the initial function that spawns the HTML model window containing the form.

function importPool() {
var ui = SpreadsheetApp.getUi();
var html = HtmlService.createHtmlOutputFromFile("importPool")
.setWidth(750)
.setHeight(300);
var dialog = ui.showModalDialog(html, "Import pool");
}

这将启动"importPool.html"

This launches "importPool.html"

<!DOCTYPE html>
<html>
<head>
<base target="_top">

</head><body>
<form id="myForm" onsubmit="processForm(myForm);">
    <div style=" text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;">
        <table width="100%" border="1" cellpadding="2" cellspacing="2" style="background-color: #c0c0c0;">
    
            
            <tr valign="top">
                <td style="border-width : 0px;text-align: left"></td>
                <td style="border-width : 0px;text-align: right">
                    <input type="button" value="Cancel" onclick="google.script.host.close()"><input type="submit" value="Import">
      </td>
            </tr>
    
        </table>
    </div>
</form>
<script>
function processForm(formdata){
  google.script.run.processImport(formdata);
  google.script.host.close();
}
</script>
</body>

</html>

我点击我的提交"按钮，然后在我的gs中调用我的processImport函数.为了测试目的，该功能仅包含

I click my "Submit" button and that calls my processImport function within my gs. For testing purposes this function only contains

function processImport(form) {
Logger.log("I am running!");
Utilities.sleep(12000); 
}

正如我所提到的，如果我减少了计时器，以使该函数执行不到十秒钟，则每次单击提交"按钮时，该函数仅运行一次.但是，如果该函数执行时间超过十秒钟，则在单击提交"时，它将运行两次.它第一次正常运行，然后在运行时间几乎恰好十秒后再次从上到下执行该功能.

As I mentioned, if I reduce the timer so the function takes less than ten seconds to execute, the function is only run once for every click of the Submit button. However if the function takes longer than ten seconds to execute it is run twice when I click Submit. It runs the first time as normal, then almost exactly ten seconds into the run time it executes the function again, top-to-bottom.

可能是什么原因造成的?我确信我做的事很愚蠢，但我找不到.请帮忙！

What could be causing this? I am convinced I am doing something stupid but I can't find it. Please help!

推荐答案

改进建议

通过事件侦听器替换内联事件处理程序(onsubmit=和onclick=属性)
使用google.script.run

withSuccessHandler

withFailureHandler

在witchSuccessHandler的回调内添加google.script.host.close()
在<script></script>

Replace inline event handlers (onsubmit= and onclick= attributes) by event listeners
Use withSuccessHandler and withFailureHandler when using google.script.run
Add google.script.host.close() inside the callback of witchSuccessHandler
Add the following at the beginning of your <script></script>

// 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);

来自 https://developers.google.com/apps-脚本/指南/html/communication#forms

请注意，加载页面中的所有表单后，默认情况下都将提交由preventFormSubmit禁用的操作.这样可以防止页面发生异常时重定向到不正确的URL.

Note that upon loading all forms in the page have the default submit action disabled by preventFormSubmit. This prevents the page from redirecting to an inaccurate URL in the event of an exception.

来自事件简介

您可以找到许多事件处理程序属性的HTML属性等效项.但是，您不应该使用这些-它们被认为是不好的做法.如果您只是在快速地做某事，使用事件处理程序属性似乎很容易，但是它们很快变得难以管理且效率低下.

You can find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.

请记住，google.script.run调用是异步的(它们之后的代码将在服务器端函数结束之前执行)

Please bear in mind that google.script.run calls are asynchronous (the code after them will be executed before the server side function ends)

如果onsubmit函数的运行时间超过10秒，则HTML表单提交两次 [英] HTML form submits twice if the onsubmit function runs longer than 10 seconds

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如果onsubmit函数的运行时间超过10秒，则HTML表单提交两次 [英] HTML form submits twice if the onsubmit function runs longer than 10 seconds

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭