serialise form data (no jquery)

by moob

HTML

<form>
  <input type="text" name="text1" value="" />
    <br />
    <input type="text" name="text2" value="" />
    <br />
  <input type="email" name="text3" value="" />
    <br />
  <input type="radio" name="radio" value="radio1" />
  <input type="radio" name="radio" value="radio2" />
  <input type="radio" name="radio" value="radio3" />
    <br />
  <input type="checkbox" name="checkboxes" value="checkbox1" />
  <input type="checkbox" name="checkboxes" value="checkbox2" />
  <input type="checkbox" name="checkboxes" value="checkbox3" />
    <br />
    <textarea name="textarea"></textarea>
    <br />
    <select name="option">
        <option value="">options</option>
        <option>option text</option>
        <option value="option 2 value">option 2 text</option>
        <option>option 3 text</option>
    </select>
    <br />
    <select multiple="true" name="options">
        <option>opt multi 1</option>
        <option value="opt multi 2 value">opt multi 2</option>
        <option>opt multi 3</option>
    </select>
</form>
<div id="output"></div>

JavaScript

(function getFormData(){
    var form, inputs, formData = {}, outputdiv;
    (function init(){
        outputdiv = document.getElementById("output");
        output();
    })();  
    
    function build(){
        form = document.querySelector("form"),
        inputs = form.querySelectorAll("input, select, textarea"),
        formData = {},
        arr = [];
        for(var i=0; i< inputs.length; i++){
            var input = inputs[i];
            input.onchange  = function(){output();};
            if(input.type=='radio'){
                if(input.checked){
                   arr.push(input.name,input.value);
                }
            } else if(input.type=='checkbox'){                
                if(input.checked){
                    arr.push(input.name,input.value);
                }
            } else if(input.multiple){                
                //find each selected child
                var options = input && input.options;
                for (var o=0; o<options.length; o++) {
                    var opt = options[o],
                        val = (opt.value || opt.text)
                    if (opt.selected) {
                        arr.push(input.name,val);
                    }
                }
            } else {
                arr.push(input.name,input.value);
            }            
        }
        var formdata = JSON.stringify(arr);
        return formdata;
    }
    function output(){
       outputdiv.innerHTML = build();
    }
    
})()