Form 2 JSON

by wrxsti85

HTML

<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<ul class="toolbar">
    <li>
        <label for="inputType">Input Type:</label>
        <span style="border:solid 2px; padding:6px;">
            <input type="radio" name="inputType" value="text" /><label for="inputType">Text</label>
            <input type="radio" name="inputType" value="radio" /><label for="inputType">Radio</label>
            <input type="radio" name="inputType" value="checkbox" /><label for="inputType">Checkbox</label>
            <input type="radio" name="inputType" value="select" /><label for="inputType">Select</label>
            <input type="radio" name="inputType" value="submit" /><label for="inputType">Submit</label>
        </span>
    </li>
    <li>
        <label for="inputName">Name the input:</label><input type="text" name="inputName" />
    </li>
    <li>
        <label for="label">Input Label:</label><input type="text" name="label" />
    </li>
    <li>
        <button class="addField">Add field >></button>
    </li>
</ul>

<div class="container">
    <h1>Form Preview</h1>
    <div class="formPre"></div>
</div>
<div class="container">
    <h1>JSON Data Preview</h1>
    <div class="jsonPre"></div>
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
    font-family: helvetica;
    font-size: 12px;
    color: #4679bd;
}

.toolbar {
    list-style: none;
    padding: 10px;
    background: #e5e5e5;
    margin: 0px;
    border-bottom: solid 1px #c5c5c5;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .5);
    font-weight: bold;
}

.toolbar li {
    padding: 5px 10px;
    border-radius: 5px;
}

.container {
    margin: 20px;
    border: solid 2px;
}

.container h1 {
    font-size: 14px;
    margin: 0px;
    border-bottom: solid 2px;
    padding: 5px 10px;
    background: #e5e5e5;
}

.formPre, .jsonPre {
    padding: 10px;
}

.toolbar label {
    display: inline-block;
    min-width: 150px;
}

.toolbar span label {
    min-width: 0px;
}

hr {
    border: solid 1px;
}

JavaScript

var a = [];
$('.addField').click(function(){    
    o = {
        inputType: $('input[name="inputType"]:checked').val(),
        inputName: $('input[name="inputName"]').val(),
        label: $('input[name="label"]').val()
    };
    a.push(o);
    $('.jsonPre').html( JSON.stringify(a) );
    $('.formPre').append('<label for="' + o.inputName + '">' + o.label + '</label><input type="' + o.inputType + '" name="' + o.inputName + '" /><hr />');
});