Google Scripts HtmlService 返回未定义的表单数据答案

【问题标题】：Google Scripts HtmlService returns undefined form dataGoogle Scripts HtmlService 返回未定义的表单数据
【发布时间】：2018-08-22 12:26:57
【问题描述】：

我正在尝试创建一个网络应用程序，用户可以通过该应用程序填写表格并将数据填充到谷歌表格中。我的问题是在我填写表格后，表格中会填充未定义的数据。

我如何定义这些数据并在每次填写表单时追加到新行。

示例取自here。

代码.gs

function doGet(e){
  return handleResponse(e);
}

var SHEET_NAME = "Sheet1";

var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service

function handleResponse(e) {

  var lock = LockService.getPublicLock();
  lock.waitLock(30000);  // wait 30 seconds before conceding defeat.

  try {

    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME);


    var headRow = e.parameter.header_row || 1;
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row = []; 

    // loop through the header columns
    for (i in headers){
      if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
        row.push(new Date());
      } else { // else use header name to get data
        row.push(e.parameter[headers[i]]);
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
    // return json success results
    return HtmlService.createHtmlOutputFromFile('index');
  } catch(e){
    // if error return this
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  } finally { //release lock
    lock.releaseLock();
  }
}

function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

index.html

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

    <script>
    var $form = $('form#test'),
    url = 'https://...';

    $('#submit-form').on('click', function(e) {
     e.preventDefault();
     var jqxhr = $.ajax({
      url: url,
      method: "GET",
      dataType: "json",
      data: $form.serializeObject()
     }).success(
      // do something
     );
    })
    </script>
  </head>
  <body>

    <form id="test">
     <p><label>ID</label>
     <input type="number" name="ID"/></p>

     <p><label>Part Number</label>
     <input type="text" name="Part Number"/></p>

     <p><label>Description</label>
     <input type="text" name="Description"/></p>

     <p><label>Item Link</label>
     <input type="url" name="Item Link"/></p>

     <p><label>Supplier</label>
     <input type="text" name="Supplier"/></p>

     <p><label>Manufacturer</label>
     <input type="text" name="Manufacturer"/></p>

     <p><label>Pins</label>
     <input type="number" name="Pins"/></p>

     <p><label>Size</label>
     <input type="text" name="Size"/></p>

     <p><label>Order Number</label>
     <input type="number" name="Order Number"/></p>

     <p><label>Location</label>
     <input type="text" name="Location"/></p>

     <p><input type="submit" value="submit-form"/></p>

    </form>

  </body>
</html>

【问题讨论】：

标签： google-apps-script

【解决方案1】：

由于您从另一个站点借用了代码，因此对我来说似乎过于复杂。这是一个更简单的解决方案恕我直言。我没有看到参数 e 在任何地方使用，所以我删除了。也不需要使用 html 表单，但我保持原样

代码.gs

function doGet(){
  try {
    return HtmlService.createHtmlOutputFromFile("HTML_Test");
  }
  catch(err) {
    return ContentService
      .createTextOutput(JSON.stringify({"result":"error", "error": err}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

function submitData(data) {
  var shid = "your spreadsheet id here";
  var ss = SpreadsheetApp.openById(shid);
  var sh = ss.getSheetByName("Sheet1");
  try {
    sh.getRange(sh.getLastRow()+1,1,1,data.length).setValues([data]);
    return "success"
  }
  catch(err) {
    sh.getRange(sh.getLastRow()+1,1).setValue(err);
    return err;
  }
}

HTML_Test.html

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

    <form id="test">
     <p><label>ID</label>
     <input type="number" id="ID"/></p>

     <p><label>Part Number</label>
     <input type="text" id="Part Number"/></p>

     <p><label>Description</label>
     <input type="text" id="Description"/></p>

     <p><label>Item Link</label>
     <input type="url" id="Item Link"/></p>

     <p><label>Supplier</label>
     <input type="text" id="Supplier"/></p>

     <p><label>Manufacturer</label>
     <input type="text" id="Manufacturer"/></p>

     <p><label>Pins</label>
     <input type="number" id="Pins"/></p>

     <p><label>Size</label>
     <input type="text" id="Size"/></p>

     <p><label>Order Number</label>
     <input type="number" id="Order Number"/></p>

     <p><label>Location</label>
     <input type="text" id="Location"/></p>

     <p><input type="button" value="Submit" onclick="submitForm()"/></p>

    </form>
    <script>
      function submitForm() {
        try {
          var data = [];
          data.push(document.getElementById("ID").value);
          data.push(document.getElementById("Part Number").value);
          data.push(document.getElementById("Description").value);
          data.push(document.getElementById("Item Link").value);
          data.push(document.getElementById("Supplier").value);
          data.push(document.getElementById("Manufacturer").value);
          data.push(document.getElementById("Pins").value);
          data.push(document.getElementById("Size").value);
          data.push(document.getElementById("Order Number").value);
          data.push(document.getElementById("Location").value);
          google.script.run.withSuccessHandler(success).submitData(data);
        }
        catch(err) {
          alert(err);
        }
      }
      function success(msg) {
        alert(msg);
      }
    </script>
  </body>
</html>

【讨论】：

太棒了，适合我。那么哪里是找出如何为某些列设置非重复值的最佳位置呢？
不确定非重复值是什么意思。您的意思是如果表单上重复的项目编号不要添加而是更新包含该 ID 的行？
更像是数据库的主键是我的想法。因此，当用户在表单中输入 ID/部件号/链接时，我希望能够检查输入的值，如果它们已经存在于工作表中，则会刷新表单，显示哪些字段与谷歌表格。
我已经展示了如何获取具有特定 ID 的行。我将所有内容都放在了一个 google doc 文件中，而不是在这里放很多代码 link