Отправить форму со скриптом приложения - PullRequest
Новая
       42

Отправить форму со скриптом приложения

0 голосов
/ 25 февраля 2019

У меня проблема, описанная в Google Script - кнопка на боковой панели продолжает открывать новую вкладку .Первоначально я использовал: 

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

Но столкнулся с проблемой, когда отправка создавала новую вкладку, как описано в этом вопросе.Я попытался перейти к подходу, обсуждаемому в посте: 

<button type='button'>

, но это приводит к тому, что кнопка не может быть нажата:

enter image description here

Теперь я изменил его обратно на: 

<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

Консоль показывает:

enter image description here

Я вижу: 

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

В журналах, как и ожидалось, так что это хорошо.Но как мне остановить открытие вкладки?

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Проблема:

forms не является допустимым селектором css или именем узла.Таким образом, preventDefault() никогда не присоединяется к событию form submit в load.

Решение:

Замените 

document.querySelectorAll('forms');

на 

document.querySelectorAll('form');

Ссылки:

0 голосов
/ 26 февраля 2019

Возможно, вы получаете предупреждение "небезопасная навигация" из-за дополнительных неуказанных аргументов, передаваемых от 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

...