Google 表格边栏 | HTML 表单，你如何解析onsubmit 表单对象？

Question

我正在边栏中创建一个表单，以根据各种标准创建新的 sheet。我总共有大约 27 个输入。我有一个文本条目，以及几组单选框和复选框。

我一直在创建一个新的 sheet，其中名称是文本输入的值。

Code.gs:

var ui = SpreadsheetApp.getUi();
var ss = SpreadsheetApp.getActiveSpreadsheet();

// Create a menu item to access the sidebar.
function onOpen(e) {
  ui.createMenu("Sidebar Test").addItem("Sidebar Test","makeSidebar").addToUi();
};
// Setup the sidebar
function makeSidebar(){
  var html = HtmlService.createHtmlOutputFromFile('Index').setTitle("Sidebar Test");
  ui.showSidebar(html);
};

// Creates the new sheet using the name provided in the form, and in index 4 using the MAINTemplate sheet as a template
function mkSheet(name) {
var templateSheet = ss.getSheetByName('MAINTemplate');
ss.insertSheet(name, 4, {template: templateSheet});
}

Index.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent forms from submitting.
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function btnMkSheet(formObject) {
        var formObject = formObject;
        var formData = new FormData(formObject);
        var formString = JSON.stringify(formObject);
        var sheetName = formObject.sheetName;
        console.log(formObject.sheetName);
        console.log(formData);
        console.log(formString);
        console.log(sheetName);
        google.script.run.mkSheet(sheetName);
      };

    </script>
  </head>
  <body>
    <button onclick="google.script.host.close()">Close</button>
    <h2>Create a new sheet</h2>
    <form id="myForm" onsubmit="btnMkSheet(this)">
      <label for="nameText">Sheet Name</label>
      <input id="nameText" name="sheetName" type="text" placeholder="QA WEB DEV 01-01-1985" />
      <p>i.e. "QA WEB DEV 01-01-1985"</p>
      <input type="submit" value="Create" />
    </form>
 </body>
</html>

当我在文本输入中输入名称并单击创建按钮时。它不会创建新的 sheet。相反，它会在控制台中抛出错误。

并且四个控制台日志如下。

<input id="nameText" name="sheetName" type="text" placeholder="QA WEB DEV 01-01-1985">
FormData {}
{"0":{},"1":{}}
<input id="nameText" name="sheetName" type="text" placeholder="QA WEB DEV 01-01-1985">

Uncaught InvalidArgumentError: Failed due to illegal value in property: 0

我可能只能通过使用查询选择器来获取输入的值。但我还有很多要添加到表格中。我想找出使用 formObject 的正确方法。

Answer 1

在你的脚本中，进行以下修改怎么样？请修改Index.html如下。

发件人：

var sheetName = formObject.sheetName;

收件人：

var sheetName = formObject.sheetName.value;

formObject.sheetName 是对象。所以，请检索值。

Google 表格边栏 | HTML 表单，你如何解析onsubmit 表单对象？

Google Sheets Sidebar | HTML form, how do you parse the onsubmit formObject?

html

javascript

forms

google-sheets

google-apps-script

发件人：

收件人：