在 Google 表格中，我的側邊欄中有一個未提交數據的表單。我的代碼有什么問題？

Question

我是編碼新手，我想讓我的工作場所中的數據輸入更加統一。 所以我一直在嘗試在側邊欄中創建一個 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>

歡迎任何幫助，因為我目前無法理解^^

Answer 1

你做得很好@Lugh，確實非常接近你的目標。 但是你需要注意一些事情：

您的showSideBar功能也不錯。

在你的`formCFCSubmit(form_data)`你有錯誤：

您要從中調用的類是SpreadsheetApp而不是(s)preadsheetApp 。
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>

現在側邊欄中的腳本可以通過 id 獲取表單，並在提交時執行formCFCSubmit函數，該函數可以使用form_data執行您想要的form_data 。

繼續編碼！

筆記：

既然你正在編碼，你應該閱讀官方文檔。
閱讀關於SpreadsheetsApp從Apps Script的電子表格服務類，找出你可以用它來量身定制您的需要哪些功能。

在 Google 表格中，我的側邊欄中有一個未提交數據的表單。我的代碼有什么問題？

問題描述

1 個解決方案

解決方案1
0 2020-02-27 15:07:07

在你的`formCFCSubmit(form_data)`你有錯誤：

在您的`menuCFC.html` ：

在 Google 表格中，我的側邊欄中有一個未提交數據的表單。 我的代碼有什么問題？

問題描述

1 個解決方案

解決方案1 0 2020-02-27 15:07:07

在你的formCFCSubmit(form_data)你有錯誤：

在您的menuCFC.html ：

在 Google 表格中，我的側邊欄中有一個未提交數據的表單。我的代碼有什么問題？

解決方案1
0 2020-02-27 15:07:07

在你的`formCFCSubmit(form_data)`你有錯誤：

在您的`menuCFC.html` ：