Submit Form with apps script

I'm having the problem described in Google Script - Sidebar button keeps opening a new tab. I initially was using:

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

But ran into a problem when the submit was creating a new tab as described in that question. I tried to change to the approach discussed in the post:

<button type='button'>

but this results in an unclickable button:

Now I've changed it back to :

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

Now I can close the form on clicking but the form does not seem to submit anything to the server side when I check the logs I don't see anything submitted on the server side.

How can I get this working and submit the form? The Entire template is below and should be freestanding:

<!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>

EDIT:

After changing code to :

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

and clicking the button I again got a new tab opened with:

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

The console shows:

I do see:

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

In the logs, as expected, so that is good. But how do I stop the tab from opening up?

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

2条回答

Lonely孤独者°

2楼-- · 2019-09-21 00:27

Probably you receive the "unsafe navigation" warning because of additional unspecified arguments passed from withSuccessHandler to google.script.host.close. When providing success handlers, if they are not your own function (i.e. you know exactly what arguments they take and use), you are best off accessing them in an anonymous function:

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

If you don't want to use arrow syntax in the HTML files, that would be

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

In this manner you ensure that whatever the output of foo is, it is not passed to google.script.host.close

0人赞添加讨论(0) 举报

何必那么认真

3楼-- · 2019-09-21 00:43

Issue:

forms is not a valid css selector or a node name. So, preventDefault() is never attached to the form submit event on load.

Solution:

Replace

document.querySelectorAll('forms');

with

document.querySelectorAll('form');

References:

0人赞添加讨论(0) 举报