使用 Google 脚本和 JavaScript 读取 Sheet 上的 html 下拉值

Question

我正在使用 JS 和 Google 应用程序脚本开发 Google Sheet 的界面。

目的是点击一个按钮，填写一个出现在旁边的html表单（有一个输入框，一个下拉框和一个多选下拉框），将数据添加到sheet 并将其写在警告框中。

我从这个完美运行的代码开始。

AddFood.gs

    // File used
var ss = SpreadsheetApp.getActiveSpreadsheet();

// Sheet used
var sheet = ss.getActiveSheet();


/*
 * Main function. Associated to the button
 */
function addFood() {
  showFormInSideBarAddFood();
}

/*
 * Show a form in a side bar for adding food
 */
function showFormInSideBarAddFood() {
  var form = HtmlService.createTemplateFromFile('IndexAddFood').evaluate().setTitle("Add Food");
  SpreadsheetApp.getUi().showSidebar(form);
}

function processFormAddFood(formObject) {

  sheet.appendRow([
      formObject.veggie
  ]);
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

FormAddFood.html

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

    <!-- form -->
    <form id="addFoodForm" onsubmit="handleFormSubmitAddFood(this)">

      <label for="veggie">Veggie</label><br/>
      <input type="text" id="veggie" name="veggie"><br/><br/>

      <button type="submit">Submit</button>
    </form>
    
  </body>
</html>

JavaScriptAddFood.html

<!-- JavaScriptAddFood.html -->

<script>
    
  /*
   * The window will not close when the form is summited
   */
    function preventFormSubmitAddFood() {

    var formsAddFood = document.querySelectorAll('FormAddFood');

    for (var i; i < formsAddFood.length; i++) {
            formsAddFood[i].addEventListener('submit', function(event) {
                event.preventDefault();
            });
        }
    }
  // The page is not refreshed when the button submit is pressed
    window.addEventListener('load', preventFormSubmit);

  /*
   * Calls the form
   */
    function handleFormSubmitAddFood(formObject) {
        google.script.run.processFormAddFood(formObject);
    document.getElementById("addFoodForm").reset();
    }
</script>

IndexAddFood.html

<!-- IndexAddFood.html -->

<!--  Links the JavaScript file and the HTML forms -->

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Form Add Fruit</title>
            <?!= include('JavaScriptAddFood'); ?>
        </head>
        <body>
      <?!= include('FormAddFood'); ?>
        </body>
    </html>

此时，我可以在sheet中添加inputbox的值了。（不要忘记将“addFood”功能分配给测试按钮）

之后，我花了几个小时按照不同的教程尝试解决这两个问题：

在同一行中添加水果和蛋糕下拉值 (Get the dropdown values and add them to the row)
获取值并将它们显示在警告框中 (Get the html value for displaying it in an alert)

这是我修改后的代码（不起作用）：

AddFood.gs

// File used
var ss = SpreadsheetApp.getActiveSpreadsheet();

// Sheet used
var sheet = ss.getActiveSheet();

/*
 * Main function. Associated to the button
 */
function addFood() {
  showFormInSideBarAddFood();
}

/*
 * Show a form in a side bar for adding food
 */
function showFormInSideBarAddFood() {
  var form = HtmlService.createTemplateFromFile('IndexAddFood').evaluate().setTitle("Add Food");
  SpreadsheetApp.getUi().showSidebar(form);
}

function processFormAddFood(formObject) {

  sheet.appendRow([
      formObject.veggie,
      // Add the dropdown values
      selectedFruit,
      selectedCake
  ]);
  SpreadsheetApp.getUi().alert(formObject.veggie + ' ' + selectedFruit + ' ' + selectedCake + "added");
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}


// Get the value for the alert
function doGet() {
  return HtmlService.createHtmlOutputFromFile('FormFood');
}

function getSelectDatas(form) {
  var nameBox = form.fruit;
  SpreadSheetApp.getUi().alert(nameBox);
}

FormAddFood

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

    <!-- form -->
    <form id="addFoodForm" onsubmit="handleFormSubmitAddFood(this)">

      <label for="veggie">Veggie</label><br/>
      <input type="text" id="veggie" name="veggie"><br/><br/>

      <label for="fruit">Fruit</label><br/>
      <select name="fruit" id="fruit" value="" onChange="document.getElementById('addFoodForm').submit()">
        <option value="Apple"> Apple </option><br/>
        <option value="Pear"> Pear </option><br/>
        <option value="Banana"> Banana </option><br/>
      </select><br/><br/>

      <label for="cake">Cake</label><br/>
      <select multiple name="cake" id="cake" value="" onChange="document.getElementById('addFoodForm').submit()">
        <option value="crumble"> Crumble </option><br/>
        <option value="brownie"> Brownie </option><br/>
        <option value="cheeseCake"> Cheese Cake </option><br/>
      </select><br/><br/>

      <button type="button" value="Submit" onClick="formSubmit()">Submit</button>
    </form>

    <script>
  /**
     * Allows to select multiple option in a select form without ctrl + click
     */
    var multiSelect = {};
    function init() {      
      var s = document.getElementsByTagName('select');
      for (var i = 0; i < s.length; i++) {
        if (s[i].multiple) {
          var n = s[i].name;
          multiSelect[n] = [];
          for (var j = 0; j < s[i].options.length; j++) {
            multiSelect[n][j] = s[i].options[j].selected;
          }
          s[i].onchange = changeMultiSelect;
        }
      }
    }
    function changeMultiSelect() {
      var n = this.name;
      for (var i=0; i < this.options.length; i++) {
        if (this.options[i].selected) {
          multiSelect[n][i] = !multiSelect[n][i];
        }
        this.options[i].selected = multiSelect[n][i];
      }
    }
    window.onload = init;
    </script>
    
  </body>
</html>

JavaScriptAddFood.html

<!-- JavaScriptAddFood.html -->

<script>
    
  /*
   * The window will not close when the form is summited
   */
    function preventFormSubmitAddFood() {

    var formsAddFood = document.querySelectorAll('FormAddFood');

    for (var i; i < formsAddFood.length; i++) {
            formsAddFood[i].addEventListener('submit', function(event) {
                event.preventDefault();
            });
        }
    }
  // The page is not refreshed when the button submit is pressed
    window.addEventListener('load', preventFormSubmit);

  /*
   * Calls the form
   */
    function handleFormSubmitAddFood(formObject) {
        google.script.run.processFormAddFood(formObject);
    document.getElementById("addFoodForm").reset();
    }


  function formSubmit() {
    var fruitDropdown = document.getElementById("fruit");
    var selectedFruit = e.value;

    var cakeDropdown = document.getElementById("fruit");
    var selectedCake = e.value;

    google.script.run.getSelectDatas(document.forms[0]);
  }
</script>

文件没有变化IndexAddFood.html

我该如何解决这些问题？我希望我说清楚了。

Answer 1

解决方案

问题 1

在 processFormAddFood 中，将值添加到使用 appendRow. Use concat 将前两个元素（蔬菜和水果）连接到可能的数组（蛋糕）的输入数组。

var rowValues = [formObject.veggie, formObject.fruit].concat(formObject.cake)
sheet.appendRow(rowValues);

修改FormAddFood.html的形式如下：

<!-- form -->
<form id="addFoodForm" onsubmit="handleFormSubmitAddFood(this)">

  <label for="veggie">Veggie</label><br/>
  <input type="text" id="veggie" name="veggie"><br/><br/>

  <label for="fruit">Fruit</label><br/>
  <select name="fruit" id="fruit">
      <option value="Apple"> Apple </option><br/>
      <option value="Pear"> Pear </option><br/>
      <option value="Banana"> Banana </option><br/>
    </select><br/><br/>

  <label for="cake">Cake</label><br/>
  <select multiple name="cake" id="cake">
      <option value="crumble"> Crumble </option><br/>
      <option value="brownie"> Brownie </option><br/>
      <option value="cheeseCake"> Cheese Cake </option><br/>
    </select><br/><br/>

  <button type="submit">Submit</button>
</form>

问题 2

检查如何显示 Alert dialogs。在processFormAddFood.

末尾添加如下代码

var ui = SpreadsheetApp.getUi(); // Same variations.
var result = ui.alert(
  'Values entered:',
  rowValues.join(', '),
  ui.ButtonSet.OK);

使用 Google 脚本和 JavaScript 读取 Sheet 上的 html 下拉值

Read html dropdown values on a Sheet with Google Script & JavaScript

javascript

forms

google-sheets

google-apps-script

dropdown

解决方案

问题 1

问题 2