部分填写表单时将 HTML 表单写入 Google 表格的问题

Question

只有当所有字段集中的输入都被选中或填写时，我的表单才能成功地将数据写入Google Sheets。如果跳过任何一个字段，则不会填充工作表中的单元格。

我错过了什么或做错了什么？

---

HTML 表单的代码：

const scriptURL =
  "https://script.google.com/macros/s/AKfycbzz-KveHder1A3CX8GcqZI6GR2MQj66PDRWNKoatIET_LXNqQs/exec"
const form = document.forms[0]

form.addEventListener("submit", e => {
  e.preventDefault()
  fetch(scriptURL, { method: "POST", body: new FormData(form) })
    .then(response => console.log("Success!", response))
    .catch(error => console.error("Error!", error.message))
})

<form action="https://script.google.com/macros/s/AKfycbzz-KveHder1A3CX8GcqZI6GR2MQj66PDRWNKoatIET_LXNqQs/exec" method="post">
  <fieldset>
    <legend>Select Foobar</legend>
    <label><input type="checkbox" name="foobar" value="Foo">Foo</label>
    <label><input type="checkbox" name="foobar" value="Bar">Bar</label>
    <label><input type="checkbox" name="foobar" value="Baz">Baz</label>
  </fieldset>
  <fieldset>
    <legend>Choose Xyzzy</legend>
    <label><input type="radio" name="xyzzy" value="Quux">Quux</label>
    <label><input type="radio" name="xyzzy" value="Quuz">Quuz</label>
  </fieldset>
  <fieldset>
    <legend>Enter Personal Details</legend>
    <input type="text" placeholder="John Doe" name="name"><br>
    <input type="email" placeholder="john.doe@example.com" name="email"><br>
    <textarea placeholder="Lorem ipsum dolor sit amet…" name="description"></textarea>
  </fieldset>
  <input type="submit" value="Submit">
</form>

上述表单提交给的Sheet：

https://docs.google.com/spreadsheets/d/10VHS6bozcdNFYcRskkoONMT8Rt-2CwJ_LJGQWdkTJq4/

---

我正在使用的Google Apps Script 的代码：

var sheetName = "Sheet1"
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup() {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty("key", activeSpreadsheet.getId())
}

function doPost(e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty("key"))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === "timestamp" ? new Date() : e.parameters[header].join(", ");
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService.createTextOutput(
      JSON.stringify({ result: "success", row: nextRow })
    ).setMimeType(ContentService.MimeType.JSON)
  } catch (e) {
    return ContentService.createTextOutput(
      JSON.stringify({ result: "error", error: e })
    ).setMimeType(ContentService.MimeType.JSON)
  } finally {
    lock.releaseLock()
  }
}

Answer 1

错误是由 join(", ") 方法应用于未定义值时引起的。

如果您离开 try 语句，错误将返回到您的浏览器：

TypeError: Cannot call method "join" of undefined. 

您可以将代码修改为例如

    var newRow = headers.map(function(header) {
      if(typeof e.parameters[header] !== "undefined") {
        return header === "timestamp" ? new Date() : e.parameters[header].join(", ");
      }else{
        return header === "timestamp" ? new Date() : e.parameters[header];
       }
    })