javascript - 将 HTML 表单单选按钮和复选框按钮选择写入 Google 表格

Question

我创建了一个 HTML 表单，它通过 Google Apps 脚本成功地将数据提交到 Google 表格。

问题是我看不到选中了哪个单选按钮或复选框按钮。我唯一得到的是在哪个字段集中检查了按钮。只有 on 标签被写入，如下所示。

如何将每个按钮选择写入工作表中的相应列，例如，我可以看到 foo、bar、baz在 foobar 列中，quux、quuz 在 xyzzy 列中？

---

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>
  <fieldset>
    <legend>Select Foobar</legend>
    <label><input type="checkbox" name="foobar" id="foo">Foo</label>
    <label><input type="checkbox" name="foobar" id="bar">Bar</label>
    <label><input type="checkbox" name="foobar" id="baz">Baz</label>
  </fieldset>
  <fieldset>
    <legend>Choose Xyzzy</legend>
    <label><input type="radio" name="xyzzy" id="quux">Quux</label>
    <label><input type="radio" name="xyzzy" id="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>

上述表单提交到的表单:

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

---

我正在使用的 Google Apps 脚本代码:

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.parameter[header]
    })

    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

• 关于 HTML 上的单选按钮和复选框，您想识别选中的内容。

如果我的理解是正确的，这个修改怎么样？请将此视为几个答案之一。

修改点:

• 为单选按钮和复选框标签添加了value属性。取值与正文相同。
• 值是从 doPost(e) 的事件对象的 parameters 属性中检索的。

修改后的脚本:

请按如下方式修改您的脚本。

HTML:

从:

<fieldset>
  <legend>Select Foobar</legend>
  <label><input type="checkbox" name="foobar" id="foo">Foo</label>
  <label><input type="checkbox" name="foobar" id="bar">Bar</label>
  <label><input type="checkbox" name="foobar" id="baz">Baz</label>
</fieldset>
<fieldset>
  <legend>Choose Xyzzy</legend>
  <label><input type="radio" name="xyzzy" id="quux">Quux</label>
  <label><input type="radio" name="xyzzy" id="quuz">Quuz</label>
</fieldset>

到:

<fieldset>
  <legend>Select Foobar</legend>
  <label><input type="checkbox" name="foobar" id="foo" value="Foo">Foo</label>
  <label><input type="checkbox" name="foobar" id="bar" value="Bar">Bar</label>
  <label><input type="checkbox" name="foobar" id="baz" value="Baz">Baz</label>
</fieldset>
<fieldset>
  <legend>Choose Xyzzy</legend>
  <label><input type="radio" name="xyzzy" id="quux" value="Quux">Quux</label>
  <label><input type="radio" name="xyzzy" id="quuz" value="Quuz">Quuz</label>
</fieldset>

Google Apps 脚本:

从:

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

到:

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

结果:

• 当上述修改点反射(reflect)到您的脚本中时，“foobar”和“xyzzy”列的值将成为单选按钮和复选框的值。
  • 例如，“Foo”和“Bar”的复选框被选中，“Quuz”的单选按钮被选中，“foobar”和“xyzzy”列的值为“Foo,Baz”和“Quuz” "，分别。

如果我误解了您的问题并且这不是您想要的方向，我深表歉意。