field maker

by James Doyle

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<input type="text" value="" name="label" placeholder="field label" />
<select name="fieldtype">
<option value="text">Text</option>
<option value="textarea">Multi-line Text</option>
<option value="radio">Radio</option>
<option value="checkbox">Checkbox</option>
<option value="dropdown">Dropdown</option>
</select>
<button id="addField">add field</button>
<div id="fieldlist">

</div>
<div id="log"></div>

CSS

#log {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: red;
    height: 1em;
    width: 200px;
    background: #eee;
}

JavaScript

function log(a) {
    console.log(a);
    $('#log').html(a);
}

function buildChoice(type) {
    var label = $('input[name="label"]').val();
    $('input[name="label"]').val('');
    if (type == 'text') {
        var template = '<label>'+lable+'</label><input type="text" value="" name="" />';
        $('#fieldlist').html(template);
    }
}

$('#addField').click(function() {
    var choice = $('select[name="fieldtype"]').children('option').filter(':selected').val();
    log(choice);
    buildChoice(choice);
});