Запись радио-формы HTML и выбора кнопки-флажка в Google Sheets - PullRequest
1 голос
/ 24 сентября 2019

Я создал HTML-форму, которая успешно отправляет данные в Google Sheets с помощью Google Apps Script.

Проблема в том, что я не вижу, какая кнопка радио или флажок отмечена.Единственное, что я получаю - в каком наборе полей проверяются кнопки.Как указано ниже, пишется только метка on.

Only the button state is submitted to Google Sheets

Как записать каждый выбор кнопки в соответствующий столбец на листе,чтобы я мог, например, увидеть 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()
  }
}

1 Ответ

2 голосов
/ 24 сентября 2019
  • О переключателях и флажках в HTML, вы хотите идентифицировать проверенное содержимое.

Если мое понимание верно, как насчет этой модификации?Пожалуйста, подумайте об этом как об одном из нескольких ответов.

Точки модификации:

  • Для тегов переключателей и флажков добавлен атрибут value.Значение совпадает с текстом.
  • Значения извлекаются из свойства parameters объекта события doPost(e).

Модифицированный скрипт:

Пожалуйста, измените ваш скрипт следующим образом.

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(",");
})

Результат:

  • Когда вышеуказанные точки модификации отражаются в вашем скрипте, значения столбцов "foobar" и "xyzzy" становятся значениями переключателей и флажков.
    • Например, отмечены флажки «Foo» и «Bar», а переключатель «Quuz» установлен, значения столбцов «foobar» и «xyzzy» равны «Foo, Baz»и "Quuz", соответственно.

Если я неправильно понял ваш вопрос, и это было не то направление, которое вы хотите, я прошу прощения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...