JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<script src="https://raw.github.com/imbcmdth/make-object/master/make-object.js"></script>
<h3>Input</h3>
<form data-formaldehyde="form_storage" method="post">
    <div>
        <label>First Name:&nbsp;<input type="text" data-formaldehyde="name.first" /></label>
    </div>
    <div>
        <label>Last Name:&nbsp;<input type="text" data-formaldehyde="name.last" /></label>
    </div>
    <div>
        <label>Phone:&nbsp;<input type="text" data-formaldehyde="phone_num" /></label>
    </div>
    <div>
        <label>Address 1:&nbsp;<input type="text" data-formaldehyde="address.lines[0]" /></label>
    </div>
    <div>
        <label>Address 2:&nbsp;<input type="text" data-formaldehyde="address.lines[1]" /></label>
    </div>
    <div>
        <label>City:&nbsp;<input type="text" data-formaldehyde="address.city" /></label>
    </div>
    <div>
        <label>State:&nbsp;<select data-formaldehyde="address.state"></select></label>
    </div>
    <button>Go</button>
</form>
<h3>Output</h3>
<div id="output">
</div>

CSS

form {
    position:relative;
    width:270px;
}
form input, form select {
    position:absolute;
    width:170px;
    right:0px;
}
form>div {
    padding:2px;
}

JavaScript

/* Formadehyde - Probably not the worst thing I've created */

var forms = [].slice.call(document.getElementsByTagName('form'));

forms.forEach(function(el) {
    var root_name = el.getAttribute('data-formaldehyde') + '.';
    el.addEventListener('submit', function(e) {
        var formElements = [].slice.call(this.querySelectorAll('[data-formaldehyde]'));
        var object = {};
        formElements.forEach(function(fEl) {
            var key = root_name + fEl.getAttribute('data-formaldehyde');
            var value = fEl.value;
            MakeObject(key, value, object);
        });
        document.getElementById('output').innerHTML = JSON.stringify(object);
        e.preventDefault();
    });
});

/* The schmutz below is just to populate the state drop down */

var US_STATES = [
    ["ALABAMA","AL"],
    ["ALASKA","AK"],
    ["ARIZONA","AZ"],
    ["ARKANSAS","AR"],
    ["CALIFORNIA","CA"],
    ["COLORADO","CO"],
    ["CONNECTICUT","CT"],
    ["DELAWARE","DE"],
    ["FLORIDA","FL"],
    ["GEORGIA","GA"],
    ["HAWAII","HI"],
    ["IDAHO","ID"],
    ["ILLINOIS","IL"],
    ["INDIANA","IN"],
    ["IOWA","IA"],
    ["KANSAS","KS"],
    ["KENTUCKY","KY"],
    ["LOUISIANA","LA"],
    ["MAINE","ME"],
    ["MARYLAND","MD"],
    ["MASSACHUSETTS","MA"],
    ["MICHIGAN","MI"],
    ["MINNESOTA","MN"],
    ["MISSISSIPPI","MS"],
    ["MISSOURI","MO"],
    ["MONTANA","MT"],
    ["NEBRASKA","NE"],
    ["NEVADA","NV"],
    ["NEW HAMPSHIRE","NH"],
    ["NEW JERSEY","NJ"],
    ["NEW MEXICO","NM"],
    ["NEW YORK","NY"],
    ["NORTH CAROLINA","NC"],
    ["NORTH DAKOTA","ND"],
    ["OHIO","OH"],
    ["OKLAHOMA","OK"],
    ["OREGON","OR"],
    ["PENNSYLVANIA","PA"],
    ["RHODE ISLAND","RI"],
    ["SOUTH CAROLINA","SC"],
    ["SOUTH DAKOTA","SD"],
    ["TENNESSEE","TN"],
    ["TEXAS","TX"],
    ["UTAH","UT"],
    ["VERMONT","VT"],
    ["VIRGINIA","VA"],
    ["WASHINGTON","WA"],
    ["WEST VIRGINIA","WV"],
    ["WISCONSIN","WI"],
    ["WYOMING","WY"],
    ["GUAM","GU  "],
   ...