В листах Google на боковой панели есть форма, которая не передает данные. Что не так с моим кодом? - PullRequest
Новая
       0

В листах Google на боковой панели есть форма, которая не передает данные. Что не так с моим кодом?

0 голосов
/ 27 февраля 2020

Я новичок в кодировании, и я хотел сделать ввод данных более равномерным в моем рабочем месте. И поэтому я пытался создать форму html на боковой панели и отправить полученные данные в электронную таблицу. У меня есть форма и боковая панель, но независимо от того, что я пробую или какой учебник я соблюдаю, я не могу понять, как получить данные из формы html в мою таблицу.

Вот .gs 

function onOpen(){
  SpreadsheetApp.getUi() 
     .createMenu('Menu CFC')
     .addItem('Ajout','showSidebar')
     .addToUi();
  showSidebar();
}

function showSidebar(){
  var html = HtmlService.createHtmlOutputFromFile('menuCFC')
  .setTitle('Mon menu CFC')
  .setWidth(300);
  SpreadsheetApp.getUi()
  .showSidebar(html);
}

function formCFCSubmit(form_data){
  var sheet = spreadsheetApp.getActive().getSheetByName('Feuille 1');

  sheet.([form_data.nom,form_data.numéro])
}

, а вот упрощенная версия моей html формы для целей тестирования. 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
 </head>
  <body>

   <form name="formAjoutCFC">
      <div class ="block form-group">
      <label for="Nom">Nom</label>
      <input type="text" name="nom" id="nom" placeholder="Nom" required>
      </div>

      <div class ="block form-group">
      <label for="Numéro">Numéro</label>
      <input type="text" name="numéro" id="numéro" placeholder="Numéro" required>
      </div>

      <div class="block">
      <button type="submit" class="action">Valider</button>
      </div>

      <div calss="block">
      <input type="reset">
      </div>
   </form>
   <script>
    document.querySelector("#formAjoutCFC").addEventListener("submit", //not sure about the #
    function(e)
    {
    e.preventDefault();    
    google.script.run.formCFCSubmit(this);    
    );
    </script>
  </body>
</html>

Любая помощь будет приветствоваться, так как меня нет моя глубина на данный момент ^^

1 Ответ

0 голосов
/ 27 февраля 2020

Вы все делаете правильно @Lugh, очень близко к вашей цели. Но вам нужно позаботиться о некоторых вещах:

Ваша функция showSideBar тоже в порядке.

На вашем formCFCSubmit(form_data) есть ошибки:

  1. класс, из которого вы хотите вызвать, это SpreadsheetApp, а не (s)preadsheetApp.
  2. sheet.([form_data.nom,form_data.numéro]) - это не существующий метод. 
// For testing purposes, you can paste the data in ranges "A1" and "B1" for example:
function formCFCSubmit(form_data){
  var sheet = SpreadsheetApp.getActive().getSheetByName('Feuille 1');
  sheet.getRange('A1').setValue(form_data.nom);
  sheet.getRange('B1').setValue(form_data.numero); 
  // Notice accent removed from numero! 
  // Putting accents in code will give you headaches sooner than later...
}

На вашем menuCFC.html:

Вот откуда большая часть ваших проблем ... 

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>

<body>
<!-- Notice 'id'! That's what the # in the query selector is referencing. Not name -->
    <form id="formAjoutCFC"> 
        <div class="block form-group">
            <label for="Nom">Nom</label>
            <input type="text" name="nom" id="nom" placeholder="Nom" required>
        </div>
        <div class="block form-group">
            <label for="Numero">Numéro</label>
            <input type="text" name="numero" id="numero" placeholder="Numéro" required>
        </div>
        <div class="block">
            <button type="submit" class="action">Valider</button>
        </div>
        <div class="block">
            <input type="reset">
        </div>
    </form>
    <script>
        document.querySelector("#formAjoutCFC")
            .addEventListener(
                "submit",
                function(e) {
                    e.preventDefault();
                    google.script.run.formCFCSubmit(this);
                }
            );
    </script>
</body>
</html>

Теперь скрипт на боковой панели может получить форму по идентификатору, а при отправке выполнить функцию formCFCSubmit, которая делает то, что вы хотите, с помощью form_data.

Продолжайте кодировать!

Примечания:

  • Вы должны прочитать официальную документацию сейчас, когда вы занимаетесь кодированием.

  • Узнайте о классе SpreadsheetsApp в службе электронных таблиц Apps Script, чтобы узнать, какие функции вы можете использовать адаптировать к вашим потребностям.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...