title: Writing HTML form radio and checkbox button selection to Google Sheets
body: <p>I created an HTML form which successfully submits data to Google Sheets via Google Apps Script.</p>
  
  <p>The problem is that I can’t see which radio or checkbox button is checked. The only thing I get is in which fieldset the buttons are checked. Only <code>on</code> label is written, as you can see below.</p>
  
  <p><a href="https://i.stack.imgur.com/VO1CH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VO1CH.png" alt="Only the button state is submitted to Google Sheets"></a></p>
  
  <p>How can I write each button selection to the appropriate column in the sheet, so I could for example see <code>foo</code>, <code>bar</code>, <code>baz</code> in the <code>foobar</code> column, and <code>quux</code>, <code>quuz</code> in the <code>xyzzy</code> column?</p>
  
  <hr>
  
  <p>The code for an HTML form:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const scriptURL =
    "https://script.google.com/macros/s/AKfycbzz-KveHder1A3CX8GcqZI6GR2MQj66PDRWNKoatIET_LXNqQs/exec"
  const form = document.forms[0]
  
  form.addEventListener("submit", e =&gt; {
    e.preventDefault()
    fetch(scriptURL, {
        method: "POST",
        body: new FormData(form)
      })
      .then(response =&gt; console.log("Success!", response))
      .catch(error =&gt; console.error("Error!", error.message))
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Select Foobar&lt;/legend&gt;
      &lt;label&gt;&lt;input type="checkbox" name="foobar" id="foo"&gt;Foo&lt;/label&gt;
      &lt;label&gt;&lt;input type="checkbox" name="foobar" id="bar"&gt;Bar&lt;/label&gt;
      &lt;label&gt;&lt;input type="checkbox" name="foobar" id="baz"&gt;Baz&lt;/label&gt;
    &lt;/fieldset&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Choose Xyzzy&lt;/legend&gt;
      &lt;label&gt;&lt;input type="radio" name="xyzzy" id="quux"&gt;Quux&lt;/label&gt;
      &lt;label&gt;&lt;input type="radio" name="xyzzy" id="quuz"&gt;Quuz&lt;/label&gt;
    &lt;/fieldset&gt;
    &lt;fieldset&gt;
      &lt;legend&gt;Enter Personal Details&lt;/legend&gt;
      &lt;input type="text" placeholder="John Doe" name="name"&gt;&lt;br&gt;
      &lt;input type="email" placeholder="john.doe@example.com" name="email"&gt;&lt;br&gt;
      &lt;textarea placeholder="Lorem ipsum dolor sit amet…" name="description"&gt;&lt;/textarea&gt;
    &lt;/fieldset&gt;
    &lt;input type="submit" value="Submit"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The sheet that the above form submits to:</p>
  
  <p><a href="https://docs.google.com/spreadsheets/d/10VHS6bozcdNFYcRskkoONMT8Rt-2CwJ_LJGQWdkTJq4/" rel="nofollow noreferrer">https://docs.google.com/spreadsheets/d/10VHS6bozcdNFYcRskkoONMT8Rt-2CwJ_LJGQWdkTJq4/</a></p>
  
  <hr>
  
  <p>The code for the Google Apps Script I’m using:</p>
  
  <pre><code>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()
    }
  }
  </code></pre>