Form Serialization

by Vico Bertogli III

HTML

<article>
    <header>Simple form Extraction</header>
    <section>
        <form>
            <input name="username" type="text" value="Vico" />
            <input name="color" type="color" />
            <select name="dropDown">
                <option value="0">try</option>
                <option value="1" selected>test</option>
            </select>
        </form>
    </section>
    <section>
        <header>Result:</header>
<span>Text</span>

    </section>
</article>

SCSS

article {
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:5%;
    border:2px #000 solid;
    background:#E4F9F1;
    header {
        font-family: helvetica;
        font-size:24px;
        margin:10px 0px;
    }
    section:first-of-type {
        padding-bottom:15px;
        margin-bottom:15px;
        border-bottom:2px #333 dashed;
    }
}

JavaScript

var extractionArray = $('form').serializeArray();
var resultObject = $.param(extractionArray);
var output = "";

console.log(resultObject);

$('span').text(JSON.stringify(resultObject));