Get form data with JS

Answer for http://stackoverflow.com/q/2276463/940217

by Kyle Falconer

HTML

<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <p>what is b?</p>
    <div>
      <input type="radio" required="" name="q_1" value="a" id="a_4">
      <label for="a_4">a</label>
      <input type="radio" required="" name="q_1" value="b" id="a_5">
      <label for="a_5">b</label>
      <input type="radio" required="" name="q_1" value="c" id="a_6">
      <label for="a_6">c</label>
      <input type="radio" required="" name="q_1" value="d" id="a_7">
      <label for="a_7">d</label>
      <input type="radio" required="" name="q_1" value="e" id="a_8">
      <label for="a_8">e</label>
    </div>
    <p>what is c?</p>
    <div>
      <input type="radio" required="" name="q_2" value="a" id="a_9">
      <label for="a_9">a</label>
      <input type="radio" required="" name="q_2" value="b" id="a_10">
      <label for="a_10">b</label>
      <input type="radio" required="" name="q_2" value="c" id="a_11">
      <label for="a_11">c</label>
      <input type="radio" required="" name="q_2" value="d" id="a_12">
      <label for="a_12">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A or B?</label>
      <div>A</div>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
       ...

JavaScript

function setOrPush(target, val) {
  var result = val;
  if (target) {
    result = [target];
    result.push(val)
  }
  return result;
}

function getFormResults(formId) {
  var formElements = document.getElementById(formId).elements;
  var formParams = {};
  for (var i = 0; i < formElements.length; i++) {
    console.log(formElements[i].type);
    switch (formElements[i].type) {
      case 'submit':
        break;
      case 'radio':
        if (formElements[i].checked)
          formParams[formElements[i].name] = formElements[i].value;
        break;
      case 'checkbox':
        if (formElements[i].checked) {
          formParams[formElements[i].name] = setOrPush(formParams[formElements[i].name], formElements[i].value);
        }
        break;
      default:
        formParams[formElements[i].name] = setOrPush(formParams[formElements[i].name], formElements[i].value);
    }
  }
  return formParams;
}

function ok() {
  var params = getFormResults('main_form')
  document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
}

(function() {
  var main_form = document.getElementById('main_form');
  main_form.addEventListener('submit', function(event) {
    event.preventDefault();
    ok();
  }, false);
})();