HTML Form Submits Twice If The Onsubmit Function Runs Longer Than 10 Seconds

I have lost an entire day fighting this and none of the search results I am finding are helping me. I am writing script in Google Sheets and using Chrome browser on Windows 10 OS.

Solution 1:

Improvement suggestions

1. Replace inline event handlers (onsubmit= and onclick= attributes) by event listeners
2. Use withSuccessHandler and withFailureHandler when using google.script.run
3. Add google.script.host.close() inside the callback of witchSuccessHandler
4. 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);

From https://developers.google.com/apps-script/guides/html/communication#forms

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.

---

From Introduction to events

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.

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

Related

• Google script web app goes blank page after submit
• addEventListener vs onclick