При использовании электронной таблицы со сценарием приложения параметры HTML-сценария не могут быть переданы в сценарий приложения - PullRequest
Новая
       1

При использовании электронной таблицы со сценарием приложения параметры HTML-сценария не могут быть переданы в сценарий приложения

0 голосов
/ 20 июня 2019

Я пытался использовать скрипт приложения, чтобы позволить людям заполнять электронную таблицу Google HTML-страницей.Но после того, как я ввел данные на html-странице, данные не появились в моей целевой таблице.

Нет проблем, когда я выполняю функцию на code.gs.Логи показываются нормально.И нет проблем, когда я использую оповещение для проверки скрипта на HTML.Но пока я пытался передать параметр из html в code.gs через js.Это не работа.

code.gs: 

function doGet(event) {
  // Logger.log(event);
  return HtmlService.createHtmlOutputFromFile("page");
}

function GG(name, email, link) {    
  var url = "spreadsheet url";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Data");

  ws.appendRow([new Date(), name, email, link]);
  Logger.log("GG function is work")
}

function WTF() {
  Logger.log("WTF !!!");
}

page.html: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <base target="_top">
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label for="email">Name:</label>
          <input type="text" class="form-control" id="username">
        </div>

        <br>
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="text" class="form-control" id="email">
        </div>
        <div class="form-group">
          <label for="link">Link:</label>
          <input type="url" class="form-control" id="link">
        </div>
        <button class="btn btn-primary" id="submit">Submit</button>
      </form>
    </div>

    <script>
      document.getElementById("submit").addEventListener("click",fn);

      function lol() {
        google.script.run.WTF();
      }

      function fn() {
        var uname = document.getElementById("username").value;
        var email = document.getElementById("email").value;
        var link = document.getElementById("link").value;

        google.script.run.GG(uname,email,link);
      }

    </script>
  </body>
</html>

Работает нормально, когда я меняю document.getElementById("submit").addEventListener("click",fn); на document.getElementById("submit").addEventListener("click",lol);

Журнал показывает, как ожидалось, но GG не работает.На листе не было добавлено никаких данных, как ожидалось, если я не выполню их через «Run> Run function> GG» на странице сценария приложения, в каждой ячейке для данных будет отображаться «undefined».

Ответы [ 2 ]

0 голосов
/ 21 июня 2019

Я более подробно изучил ваш код и думаю, что вам не хватает того, как такая форма работает как веб-приложение.Ваша функция GG пытается сделать то же самое, что и отправка формы с помощью метода POST и реализация метода doPost в вашем code.gs.

Если вы пишете форму с помощью method="POST" action="[your script url]" и добавляетеатрибут name для каждого элемента управления: 

  <form method="post" action="[your script url]">
    <div class="form-group">
      <label for="email">Name:</label>
      <input type="text" class="form-control" id="username" name="username">
    </div>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="text" class="form-control" id="email" name="email">
    </div>
    <div class="form-group">
      <label for="link">Link:</label>
      <input type="url" class="form-control" id="link" name="link">
    </div>
    <button class="btn btn-primary" id="submit">Submit</button>
  </form>

Метод doPost () в code.gs может быть следующим: 

function doPost(e) {

  var name = e.parameter.username;
  var email = e.parameter.email;
  var link = e.parameter.link;

  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");  

  ws.appendRow([new Date(), name, email, link]);
  Logger.log("Event logged" + name + " " + email + " " + link);

  return HtmlService.createHtmlOutput("<h1>Thanks for submitting your information</h1>");
}

Это добавит строку к даннымзапишите и зарегистрируйте сообщение, которое вы можете просмотреть в редакторе сценариев, и больше соответствует тому, как должен работать этот вид веб-приложения на основе электронных таблиц.

0 голосов
/ 20 июня 2019

Обновлено:

Ваш обработчик события отправки конфликтует с действием браузера по умолчанию для отправки формы, поэтому вызывается google.script.run.fn(), но браузер также перемещается на другую страницу, прежде чем вы сможете увидеть результаты.Если вы добавите параметр события в ваш fn и позвоните e.preventDefault(), вы по крайней мере получите возможность увидеть эффект вашего вызова на google.script.run.fn(). 

  function fn(e) {
    e.preventDefault();

    var uname = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var link = document.getElementById("link").value;

    google.script.run
       .withSuccessHandler(function(){
         alert("success");
       })
       .withFailureHandler(function(e){
         alert("error:" + e);
       })
       .GG(uname,email,link);
  }

Теперь вы должны увидеть ошибкусообщение о том, что у вас нет разрешения на открытие электронной таблицы.

Ваша функция GG () не должна повторно открывать электронную таблицу - она ​​уже связана с вашим сценарием: 

function GG(name, email, link) {    
  var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
  ws.appendRow([new Date(), name, email, link]);
  Logger.log("GG function is working:" + new Date());
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...