Как сохранить значение раскрывающегося списка HTML в контексте скрипта Google? - PullRequest
0 голосов
/ 27 июня 2019

У меня есть раскрывающееся меню на HTML-странице. Что я не знаю, как кодировать, так это как сохранить параметр меню, выбранный пользователем, чтобы его можно было перенести в файл gs.

Я просматривал SO-сайт для поиска кода, но все, что мне кажется, это ответы на вопросы, касающиеся javascript, php и т. Д. ( Изменить ссылку с помощью HTML Dropdown и Заполнить поле HTML с например, данные внешнего файла JSON ).

Тестовый код, который я пытаюсь создать, приведен ниже:

HTML

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
<select id="Instrument">
       <option>1</option>
       <option>2</option>
       <option>3</option>
    </select>

<!--Need code here to save the option chosen above and code that 
allows for the option chosen to be moved to the gs side of this.-->

  </body>
</html>

Я ожидаю, что смогу "сохранить" эту опцию и передать ее в скрипт Google, чтобы ее можно было в дальнейшем обрабатывать.

Например, если бы я имел дело просто с полями ввода, а не с данными из раскрывающегося списка, я написал бы что-то вроде этого:

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

    <input id="idNewSongTitle" type="text" placeholder="Song Title"><br><br>
    <input id="idNewSongWriters" type="text" placeholder="Song Writers">*<br><br>
    <button onclick="saveUserInput()">Create New Lyric Doc</button></center><br><br>
    <script>
      window.saveUserInput = function() {
        var docName = document.getElementById('idNewSongTitle').value;
        var songTitle = document.getElementById('idNewSongTitle').value;
        var songWriters = document.getElementById('idNewSongWriters').value;
        console.log('songTitle: ' + songTitle)
        google.script.run       
          .withSuccessHandler(openNewDoc)
          .createNewLandscapeLyric({docName:docName,songTitle:songTitle, songWriters: songWriters})
      }
       function openNewDoc(results){
           window.open(results.url, '_blank').focus();
       }
    </script>
  </body>
</html>

Обновление

OK. Спасибо @TheMaster. Теперь мы готовим!

Я использовал ваше второе предложение и поместил его в реальную версию, с которой я работаю, следующим образом:

HTML

<!DOCTYPE html>
<html>
  <head>
<base target="_top" />
  </head>
  <body>
<select id="InstrNum" name="Instrument Number">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select><br><br>
<button onclick="saveUserInput()">Continue</button><br><br>

<script>
   window.saveUserInput = function() {
   var instrNum = document.getElementById('InstrNum').value;
   console.log('instrNum: ' + instrNum)
        google.script.run       
           .withSuccessHandler(openCatalog)
           .insertInfo({instrNum:instrNum})

   function openCatalog(results){
           window.open(results.url, '_blank').focus();
       }
}
</script>
  </body>
</html>

гс

function onCheck(e) {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getActiveSheet();
    var cell= sheet.getActiveCell().getColumn();
    var col = ss.getRange('Perform').getColumn(); 
        if (cell == col){
    var html = HtmlService.createHtmlOutputFromFile('index')
      .setWidth(400)
      .setHeight(300);
    SpreadsheetApp.getUi()
      .showModalDialog(html, 'Performance Information');
}
   }
function insertInfo(objArgs){
    var instrNum = objArgs.instrNum;
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getActiveSheet();
    var cell= sheet.getActiveCell();
    var oneCellRight = cell.offset(0, 1)
    oneCellRight.setValue(instrNum);

}

Это именно то, что я ожидал, за исключением двух вопросов. (То есть, когда я смотрю на SS, значение из выпадающего меню было введено в целевую ячейку.)

Две вещи, которые не происходят, мне нужно, чтобы это произошло:

  • Диалоговое окно не закрывается при нажатии кнопки «Продолжить».
  • Каталог СС не открыт.

Есть идеи на этот счет?

Обновление 2

Как отмечает @TheMaster, мои вышеупомянутые вопросы не связаны. Я взглянул на похожий код и понял, что забыл оператор return. Итак, я добавил его, как показано ниже, и это решило одну проблему: открыл новый каталог SS. Однако он не закрывал ни диалоговое окно, ни исходную открытую страницу каталога SS.

Пересмотренный GS

function insertInfo(objArgs){
    var instrNum = objArgs.instrNum;
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var url = ss.getUrl()
    Logger.log(url)
    var sheet = ss.getActiveSheet();
    var cell= sheet.getActiveCell();
    var oneCellRight = cell.offset(0, 1)
    oneCellRight.setValue(instrNum);
    return {
        url: url
  };

На этом трансляция завершена.

1 Ответ

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

Логика скрипта:

  • change запускается каждый раз, когда параметр изменяется и фиксируется в select. Вы можете использовать это для отправки данных на сервер.
  • В качестве альтернативы, вы можете использовать функцию saveUserInput для получения значения select. Если вы хотите провести какую-либо проверку данных, используйте <form>.

Отрывок:

<!DOCTYPE html>
<html>
  <head>
<base target="_top" />
  </head>
  <body>
<select id="Instrument" name="InstrumentSelect">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<!--Code to save the option chosen above and code that 
allows for the option chosen to be moved to the gs side of this.-->
<script>
  handleOptionChange = function(e) {
    console.info(e.target.value);
    google.script.run.optionChanged(e.target.value);
  };
  document
    .getElementById('Instrument')
    .addEventListener('change', handleOptionChange);
</script>
  </body>
</html>

ИЛИ

var instrument = document.getElementById('Instrument').value;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...