Simple Form Builder

Very simple, very rough...

by sundaramkumar

HTML

<script src="http://colorto.me/js/jquery.ui.min.js"></script>
<div id="elements">
    
    <a href="#" id="save">Save</a>
    
    <div class="sample">
        <input class="el" type="text" /> (text)
        <a href="#" class="insert">insert</a>
    </div>
    
    <div class="sample">
        <input class="el" type="url" /> (url)
        <a href="#" class="insert">insert</a>
    </div>
    
    <div class="sample">
        <input class="el" type="email" /> (email)
        <a href="#" class="insert">insert</a>
    </div>
    
    <div class="sample multi">
        <input class="el" type="checkbox" />
        <a href="#" class="insert">insert</a>
    </div>

    <div class="sample multi">
        <input class="el" type="radio" />
        <a href="#" class="insert">insert</a>
    </div>
    
    <div class="sample">
        <textarea class="el"></textarea>
        <a href="#" class="insert">insert</a>
    </div>
    
</div>
<div id="canvas"></div>
        <textarea id="output"></textarea>

CSS

#elements,
#canvas {
    width: 40%;
    float: right;
}
#canvas {
    width: 60%;
    background: #eee;
}
#elements input,
#elements textarea {
    width: 80px;
}
.sample,
p {
    padding: 5px;
    margin: 5px;
    border: 2px solid #ccc;
    background: #fff;
}
input[type='radio'],
input[type='checkbox'] {
    margin: 0 3px;
}
input[type='text'],
input[type='url'],
input[type='number'],
input[type='email'] {
    margin: 0 3px;
}
label.group {
    display:block;
}
label {
    padding: 0 5px;
}
#save {
    display:block;
    text-align: center;
}
#output {
    display:none;
    width: 90%;
    margin: 10px 5%;
    height: 100px;
}

JavaScript

jQuery(document).ready(function($) {

    $('.insert').click(function() {
        el = $(this).siblings('.el').clone();
        tag = $(this).siblings('.el').get(0).nodeName.toLowerCase();
        var i = 0,
            num = 1,
            group;
        if ( $(this).parent().hasClass('multi') ) {
            num = prompt( 'how many?', 1);
            group = prompt( 'Group name' );
            group = '<label class="group">'+group+'</label>';
        }
        
        $('#canvas').append('<p class="tm"></p>');
        $('p.tm').prepend( group );
        while (i < num) {
            label = prompt('label');
            if (label == '' || label == null ) {
                $('p.tm').remove();
                break;
            }
            el.appendTo('p.tm').wrap('<label>'+label+'</label>');
            el = el.clone();
            i++;
        }
        //alert( tag );
        $('p.tm').removeClass('tm');
    });
    $('#save').click( function() {
    alert($('#canvas').html())
        $('#output').html( $('#canvas').html() ).show();
        return false;
    });
    $('#canvas p').live('dblclick', function() {
        $(this).remove();
    });
    $('#canvas').sortable();

});