Problem with writing HTML form to Google Sheets when form is partially filled

Question

My form is successfully writing data to Google Sheets only when inputs in all fieldsets are selected or filled. If any one of the fields are skipped, the cells in the sheet don't get populated.

What am I missing or doing wrong?

---

The code for my HTML form:

 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>

The Sheet that the above form submits to:

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

---

The code for the Google Apps Script I'm using:

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

The error is originated by the method join(", ") when applied to an undefined value.

If you leave the try statement away, the error will be returned to your browser:

TypeError: Cannot call method "join" of undefined. 

You can modify your code to eg

    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];
       }
    })