<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/srmooney/pen/QNmpXR?limit=all&page=7&q=formBuilder" />
<style class="cp-pen-styles">body { font-family: arial; }
@font-face {
font-family: 'formBuilder';
src: url('data:application/font-woff;base64,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') format('woff'),
url('data:application/octet-stream;base64,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UlggPFkusSsBFCstsDwsIyAuRrACJUZQWCA8WS6xKwEUKy2wPSwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xKwEUKy2wPiywNSsjIC5GsAIlRlJYIDxZLrErARQrLbA/LLA2K4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrErARQrsARDLrArKy2wQCywABawBCWwBCYgLkcjRyNhsAlDKyMgPCAuIzixKwEUKy2wQSyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAJQysgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwAmIgsABQWLBAYFlmsAFjYCCwASsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsAJiILAAUFiwQGBZZrABY2GwAiVGYTgjIDwjOBshICBGI0ewASsjYTghWbErARQrLbBCLLA1Ky6xKwEUKy2wQyywNishIyAgPLAEI0IjOLErARQrsARDLrArKy2wRCywABUgR7AAI0KyAAEBFRQTLrAxKi2wRSywABUgR7AAI0KyAAEBFRQTLrAxKi2wRiyxAAEUE7AyKi2wRyywNCotsEgssAAWRSMgLiBGiiNhOLErARQrLbBJLLAII0KwSCstsEossgAAQSstsEsssgABQSstsEwssgEAQSstsE0ssgEBQSstsE4ssgAAQistsE8ssgABQistsFAssgEAQistsFEssgEBQistsFIssgAAPistsFMssgABPistsFQssgEAPistsFUssgEBPistsFYssgAAQCstsFcssgABQCstsFgssgEAQCstsFkssgEBQCstsFossgAAQystsFsssgABQystsFwssgEAQystsF0ssgEBQystsF4ssgAAPystsF8ssgABPystsGAssgEAPystsGEssgEBPystsGIssDcrLrErARQrLbBjLLA3K7A7Ky2wZCywNyuwPCstsGUssAAWsDcrsD0rLbBmLLA4Ky6xKwEUKy2wZyywOCuwOystsGgssDgrsDwrLbBpLLA4K7A9Ky2waiywOSsusSsBFCstsGsssDkrsDsrLbBsLLA5K7A8Ky2wbSywOSuwPSstsG4ssDorLrErARQrLbBvLLA6K7A7Ky2wcCywOiuwPCstsHEssDorsD0rLbByLLMJBAIDRVghGyMhWUIrsAhlsAMkUHiwARUwLQBLuADIUlixAQGOWbABuQgACABjcLEABUKyAAEAKrEABUKzCgIBCCqxAAVCsw4AAQgqsQAGQroCwAABAAkqsQAHQroAQAABAAkqsQMARLEkAYhRWLBAiFixA2REsSYBiFFYugiAAAEEQIhjVFixAwBEWVlZWbMMAgEMKrgB/4WwBI2xAgBEAAA=') format('truetype'),
url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxtZXRhZGF0YT5Db3B5cmlnaHQgKEMpIDIwMTYgYnkgb3JpZ2luYWwgYXV0aG9ycyBAIGZvbnRlbGxvLmNvbTwvbWV0YWRhdGE+CjxkZWZzPgo8Zm9udCBpZD0iZm9udGVsbG8iIGhvcml6LWFkdi14PSIxMDAwIiA+Cjxmb250LWZhY2UgZm9udC1mYW1pbHk9ImZvbnRlbGxvIiBmb250LXdlaWdodD0iNDAwIiBmb250LXN0cmV0Y2g9Im5vcm1hbCIgdW5pdHMtcGVyLWVtPSIxMDAwIiBhc2NlbnQ9Ijg1MCIgZGVzY2VudD0iLTE1MCIgLz4KPG1pc3NpbmctZ2x5cGggaG9yaXotYWR2LXg9IjEwMDAiIC8+CjxnbHlwaCBnbHlwaC1uYW1lPSJjaGVjay1zcXVhcmUtMSIgdW5pY29kZT0iJiN4MjE7IiBkPSJNODc1IDQ2M3YtNDg4aC03NTB2NzUwaDY1Nmw2MyA2M2gtNzgxdi04NzZoODc1djYxM3ogbS0zODEtMjk0bC0yNjMgMjYyIDk0IDg4IDE2OS0xNzUgNDE5IDQxOSA4Ny04OHoiIGhvcml6LWFkdi14PSIxMDAwIiAvPgoKPGdseXBoIGdseXBoLW5hbWU9ImNoZWNrLXNxdWFyZSIgdW5pY29kZT0iJiN4MjI7IiBkPSJNODEzIDc5NGwtNjMtNjloLTc1MHYtODc1aDg3NXY2NTZsMTA2IDEyNS0xNjggMTYzeiBtLTQwNy02NzVsLTI2MiAyNjIgODcgODggMTY5LTE2OSA0MTMgNDEzIDg3LTg4LTQ5NC01MDZ6IiBob3Jpei1hZHYteD0iMTAwMCIgLz4KCjxnbHlwaCBnbHlwaC1uYW1lPSJkb3QtaW5zaWRlLWEtY2lyY2xlIiB1bmljb2RlPSImI3gyMzsiIGQ9Ik01MDAgNjAwYy0xMzcgMC0yNTAtMTEyLTI1MC0yNTBzMTEzLTI1MCAyNTAtMjUwIDI1MCAxMTMgMjUwIDI1MC0xMTIgMjUwLTI1MCAyNTB6IG0wIDE4OGMyNDQgMCA0MzgtMTk0IDQzOC00MzhzLTE5NC00MzgtNDM4LTQzOC00MzcgMTk0LTQzNyA0MzggMTkzIDQzOCA0MzcgNDM4eiBtMCA2MmMtMjc1IDAtNTAwLTIyNS01MDAtNTAwczIyNS01MDAgNTAwLTUwMCA1MDAgMjI1IDUwMCA1MDAtMjI1IDUwMC01MDAgNTAwdjB6IiBob3Jpei1hZHYteD0iMTAwMCIgLz4KCjxnbHlwaCBnbHlwaC1uYW1lPSJpbnB1dCIgdW5pY29kZT0iJiN4MjQ7IiBkPSJNMTAwMCA1MzhjMCAzNy0yNSA2Mi02MiA2MmgtODc1Yy0zOCAwLTYzLTI1LTYzLTYydi0zNzVjMC0zOCAyNS02MyA2My02M2g4NzVjMzcgMCA2MiAyNSA2MiA2M3YzNzV6IG0tNjItMzc1aC04NzV2Mzc1aDg3NXYtMzc1eiBtLTgxMyAzMTJoNjN2LTI1MGgtNjN2MjUweiIgaG9yaXotYWR2LXg9IjEwMDAiIC8+Cgo8Z2x5cGggZ2x5cGgtbmFtZT0icGFyYWdyYXBoIiB1bmljb2RlPSImI3gyNTsiIGQ9Ik0zNDQgODUwYy0xNTYgMC0yODEtMTI1LTI4MS0yODFzMTI1LTI4MSAyODEtMjgxaDE1NnYtNDM4aDEyNXY4NzVoNjN2LTg3NWgxMjV2ODc1aDEyNXYxMjVoLTU5NHoiIGhvcml6LWFkdi14PSIxMDAwIiAvPgoKPGdseXBoIGdseXBoLW5hbWU9InNlbGVjdC1saXN0IiB1bmljb2RlPSImI3gyNjsiIGQ9Ik02MyA4NTBoNzUwdi0xMjVoLTc1MHYxMjV6IG0wLTUwMGg4MTJ2LTEyNWgtODEydjEyNXogbTAtMTg3aDY4N3YtMTI1aC02ODd2MTI1eiBtMC0xODhoODc1di0xMjVoLTg3NXYxMjV6IG0tNjMgNjg4di0yNTBoMTAwMHYyNTBoLTEwMDB6IG02ODgtMTg4aC02MjV2MTI1aDYyNXYtMTI1eiIgaG9yaXotYWR2LXg9IjEwMDAiIC8+Cgo8Z2x5cGggZ2x5cGgtbmFtZT0ic2VsZWN0IiB1bmljb2RlPSImI3gyNzsiIGQ9Ik05MzggNjAwaC04NzVjLTM4IDAtNjMtMjUtNjMtNjJ2LTM3NWMwLTM4IDI1LTYzIDYzLTYzaDg3NWMzNyAwIDYyIDI1IDYyIDYzdjM3NWMwIDM3LTI1IDYyLTYyIDYyeiBtLTE4OC0zMTJsLTEyNSAxMjVoMjUwbC0xMjUtMTI1eiIgaG9yaXotYWR2LXg9IjEwMDAiIC8+Cgo8Z2x5cGggZ2x5cGgtbmFtZT0idGV4dC1pbnB1dCIgdW5pY29kZT0iJiN4Mjg7IiBkPSJNMTI1IDcyNWg2M3YtMjUwaC02M3YyNTB6IG0tNjIgMTI1Yy0zOCAwLTYzLTI1LTYzLTYydi04NzZjMC0zNyAyNS02MiA2My02Mmg5Mzd2MTAwMGgtOTM3eiBtNzUwLTkzOGgtNzUwdjg3Nmg3NTB2LTg3NnogbTEyNSAwdjBoLTYzdjYzaDYzdi02M3ogbTAgMTI2aC02M3Y2MjVoNjN2LTYyNXogbTAgNjg3aC02M3Y2M2g2M3YtNjN6IiBob3Jpei1hZHYteD0iMTAwMCIgLz4KCjxnbHlwaCBnbHlwaC1uYW1lPSJ1cGxvYWQtMSIgdW5pY29kZT0iJiN4Mjk7IiBkPSJNNjg4IDIyNXYtMTI1aC0zNzV2MTI1aC0zMTN2LTM3NWgxMDAwdjM3NWgtMzEyeiBtLTQzOC0yNTBoLTEyNXYxMjVoMTI1di0xMjV6IG01NjMgNTYzbC0zMTMgMzEyLTMxMi0zMTJoMTg3di0zNzVoMjUwdjM3NXoiIGhvcml6LWFkdi14PSIxMDAwIiAvPgoKPGdseXBoIGdseXBoLW5hbWU9InVwbG9hZCIgdW5pY29kZT0iJiN4MmE7IiBkPSJNMC0yNWgxMDAwdi0xMjVoLTEwMDB2MTI1eiBtNTAwIDg3NWwtMzEyLTMxMmgxODd2LTUwMGgyNTB2NTAwaDE4OHoiIGhvcml6LWFkdi14PSIxMDAwIiAvPgoKPGdseXBoIGdseXBoLW5hbWU9ImF0IiB1bmljb2RlPSImI3gyYjsiIGQ9Ik00NjkgODhjLTE0NCAwLTI2MyAxMTgtMjYzIDI2MnMxMTkgMjYzIDI2MyAyNjMgMjYyLTExOSAyNjItMjYzYzctMTQ0LTExOC0yNjItMjYyLTI2MnogbTAgNDM3Yy05NCAwLTE2OS04MS0xNjktMTc1czc1LTE3NSAxNzUtMTc1IDE3NSA3NSAxNzUgMTc1LTg3IDE3NS0xODEgMTc1eiBtMzEtNjc1Yy0yNzUgMC01MDAgMjI1LTUwMCA1MDBzMjI1IDUwMCA1MDAgNTAwIDUwMC0yMjUgNTAwLTUwMGMwLTk0LTI1LTE4Ny03NS0yNjItMTktMzItNjktNzUtMTQ0LTc1LTUwIDAtODEgMTgtMTAwIDM3LTQzIDQ0LTM3IDExMy0zNyAxMTl2NDMxaDk0di00MzdjMC0xMyAwLTM4IDEyLTUwIDAgMCAxMy0xMyAzMS0xMyA0NCAwIDY5IDMxIDY5IDMxIDM4IDYzIDYzIDEzOCA2MyAyMTMgMCAyMjUtMTgyIDQwNi00MDcgNDA2cy00MTItMTc1LTQxMi00MDAgMTgxLTQwNiA0MDYtNDA2YzQ0IDAgODEgNiAxMTkgMThsMjUtODdjLTQ0LTE5LTk0LTI1LTE0NC0yNXoiIGhvcml6LWFkdi14PSIxMDAwIiAvPgo8L2ZvbnQ+CjwvZGVmcz4KPC9zdmc+') format('svg');
font-style:normal;
font-weight:normal;
}
.formBuilder { font-size: 12px; max-width: 600px; }
.formBuilder * { box-sizing: border-box; }
.formBuilder ul,
.formBuilder li { margin: 0; padding: 0; list-style: none;}
.formBuilder .frm-fields { max-width: 400px; }
.formBuilder .frm-fields:empty { text-align: center; border: dashed 2px #CCC; padding: 40px; }
.formBuilder .frm-fields:empty:before { content: 'Add Items Here.'; color: #999; }
.formBuilder .frm-controls-panel { float: right; background: #CCC; min-width: 150px; max-width: 200px; position: relative; z-index: 10; position: -webkit-sticky; position:sticky; right: 0; top: 8px; }
.formBuilder .frm-controls-panel li { padding: 5px 5px 5px 23px; border-top: solid 1px #999; }
.formBuilder .frm-controls-panel li:first-child { border: none; }
.formBuilder .frm-controls-panel li:before { content:'\0020'; display: inline-block; width: 10px; text-align:center; font-family: 'formBuilder'; float:left; margin-left:-18px; }
.formBuilder .frm-controls-panel li.ui-draggable-dragging { border: none; }
.formBuilder .frm-controls-panel li.ui-draggable-dragging:before { display: none; }
.formBuilder .frm-controls-panel li[data-key="checkbox"]:before { content: '\21'; }
.formBuilder .frm-controls-panel li[data-key="file"]:before { content: '\2a'; }
.formBuilder .frm-controls-panel li[data-key="paragraph"]:before { content: '\25';}
.formBuilder .frm-controls-panel li[data-key="radio"]:before { content: '\23'; }
.formBuilder .frm-controls-panel li[data-key="select"]:before,
.formBuilder .frm-controls-panel li[data-key="selectState"]:before{ content: '\26'; }
.formBuilder .frm-controls-panel li[data-key="text"]:before { content: '\24'; }
.formBuilder .frm-controls-panel li[data-key="textarea"]:before { content: '\28'; }
.formBuilder .frm-controls-panel li[data-key="email"]:before { content: '\2b'; }
.formBuilder .frm-controls-panel li:hover { background: #DDD; }
.formBuilder .frm-controls-panel .ui-draggable-handle { cursor: move; }
.formBuilder .frm-control { margin-bottom: 5px; background: #CCC; position: relative; z-index: 1; overflow: hidden; }
.formBuilder .frm-control .frm-tite-bar { position: relative; z-index; 1; padding: 2px 25px 2px 0; font-size: 14px; }
.formBuilder .ui-sortable .frm-control .frm-tite-bar { cursor: move; }
.formBuilder .frm-control .frm-toggle { text-indent: -9999px; display: inline-block; width: 20px; height: 20px; position: relative; z-index: 1; -moz-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; }
.formBuilder .frm-control .frm-toggle:before { content: ''; display: block; width : 0; height: 0; left: 50%; top: 50%; margin: -5px 0 0 -5px; position: absolute; z-index: 1; border-left: 5px solid transparent; border-top: 8px solid #000; border-right: 5px solid transparent; }
.formBuilder .frm-control.closed .frm-toggle { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.formBuilder .frm-control.closed .frm-tite-bar:after { content: ' : ' attr(data-label); display: inline-block; }
.formBuilder .frm-control.closed .btn-delete { display: none; }
.formBuilder .frm-control .frm-contents { background: #DDD; padding: 5px; margin: 0 5px 5px 5px; position: relative; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; max-height: 400px; }
.formBuilder .frm-control.closed .frm-contents { height: 0; overflow: hidden; padding: 0; margin: 0; }
.formBuilder .frm-control .btn-delete { display: block; position: absolute; z-index: 1; top: 2px; right: 2px; text-indent: -9999px; width: 20px; height: 20px; }
.formBuilder .frm-control .btn-delete:before,
.formBuilder .frm-control .btn-delete:after { content:''; display: block; width: 15px; height: 1px; background: red; position: absolute; top: 50%; left: 0; }
.formBuilder .frm-control .btn-delete:before { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.formBuilder .frm-control .btn-delete:after { -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.formBuilder .frm-control .btn-add { display: block; position: relative; z-index: 1; color: green; padding-left: 12px; text-decoration: none; margin-top: 5px; }
.formBuilder .frm-control .btn-add:before,
.formBuilder .frm-control .btn-add:after { content:''; display: block; width: 10px; height: 1px; background: currentColor; position: absolute; top: 50%; left: 0; }
.formBuilder .frm-control .btn-add:after { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.formBuilder .frm-field { padding-left: 150px; margin-bottom: 2px; }
.formBuilder .frm-field label { margin-left: -130px; float: left; line-height: 2em; }
.formBuilder .frm-field-required label { line-height: 1.5em; }
.formBuilder .frm-field input[type=text],
.formBuilder .frm-field textarea { border: solid 1px #CCC; padding: 3px; width: 90%; }
.formBuilder .frm-field-option { position: relative; }
.formBuilder .frm-field-option input[type=text] { width: 80%; width: calc(100% - 60px); }
.formBuilder .frm-field-option .btn-delete { display: inline-block; position: relative; vertical-align: top; margin-left: 5px; }
@media screen and (max-width:590px) {
.formBuilder .frm-controls-panel { display: none; }
.formBuilder .frm-controls { display: block; }
}
@media screen and (min-width:590px) {
.formBuilder .frm-controls-panel { display: block; }
.formBuilder .frm-controls { display: none; }
}</style></head><body>
<div id="form"></div>
<a href="#" id="save">Save</a>
<pre id="result" style="width: 100%;"></pre>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/stickyfill/1.1.4/stickyfill.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script >(function($){
"use strict";
$.fn.formBuilder = function(opts) {
var options = $.extend({
data: null,
save: null
}, opts);
return this.each(function() {
var container = $(this);
var controls = $.fn.formBuilder.controls;
var formFields = null;
if(!$.fn.sortable || !$.fn.draggable){
container.html('<p style="color:red">This plugin requires jqueryUI Sortable & Draggable!</p>');
throw('This plugin requires jqueryUI Sortable & Draggable');
}
if (container.data('formBuilder')) { return; }
container.addClass('formBuilder').data('formBuilder', true);
render();
/* Events */
/* Save */
container.on('save.formBuilder', function(e){
var data = serialize();
if (options.save){
options.save(data);
}
});
/* Update title bar */
container.on('keyup.formBuilder', '.frm-field-label input', function(e){
var val = $(this).val();
$(this).parents('.frm-control').find('.frm-tite-bar').attr('data-label', val);
});
/* Add Field */
container.on('change.formBuilder', 'select.frm-controls', function(e){
var key = $(this).val();
$(this).val('');
if (!key){
//console.log('no key');
return;
}
var control = findControl(key);
if (!control) {
//console.log('no control ('+ key +')');
return;
}
var html = renderControl(control, '', '', false);
formFields.append(html);
});
/* Show/Hide Field */
container.on('click.formBuilder', '.frm-toggle', function(e){
$(this).parents('.frm-control').toggleClass('closed');
});
/* Delete Field */
container.on('click.formBuilder', '.delete', function(e){
e.preventDefault();
if(window.confirm($(this).attr('title'))){
$(this).parents('li').animate({opacity: 'hide', height: 'hide', marginBottom: '0px'}, 'fast', function () {
$(this).remove();
});
}
});
/* Methods */
function render(){
var controlSelect = [];
controlSelect.push('<select class="frm-controls">');
controlSelect.push('<option value="0">Add New Field...</option>');
var controlList = [];
controlList.push('<ul class="frm-controls-panel">');
$.each(controls, function(index, element){
controlSelect.push('<option value="'+ element.key +'">'+ element.title +'</option>');
controlList.push('<li data-key="'+ element.key +'">'+ element.title +'</li>');
if (element.init){ element.init(container); }
});
controlSelect.push('</select>');
controlSelect = controlSelect.join('');
controlList.push('</ul>');
controlList = controlList.join('');
var html = [];
html.push(controlList);
html.push(controlSelect);
html.push('<ul class="frm-fields">');
/* Load existing values */
if (options.data) {
var doc = $(options.data);
$('field', doc).each(function(index, element){
var field = fromXML($(element));
if (field.control){
html.push(renderControl(field.control, field.label, field.values, field.required));
}
});
}
html.push('</ul>');
html.push(controlSelect);
container.append(html.join(''));
formFields = container.find('ul.frm-fields');
if ($.fn.sortable){
$('.frm-controls-panel li', container).draggable({
connectToSortable: formFields,
helper: "clone",
start: function(event, ui){
console.log('start', ui);
var item = ui.helper;
var w = formFields.outerWidth();
var key = item.attr('data-key');
if (!key){
console.log('no key');
return;
}
var control = findControl(key);
if (!control) {
console.log('no control ('+ key +')');
return;
}
var newItem = $(renderControl(control, '', '', false));
item.removeAttr('data-key').attr('data-control', newItem.attr('data-control')).html(newItem.html()).addClass(newItem.attr('class')).css({minWidth: w, height: 'auto'});
}
});
formFields.sortable({
axis: 'y',
distance: 5,
opacity: 0.6,
cursor: 'move'
});
}
if ($.fn.Stickyfill){
$('.frm-controls-panel', container).Stickyfill();
}
}
function fromXML(field){
var key = field.attr('type');
var label = field.attr('label');
//var required = (field.prop('required') === 'true' || field.prop('required') === 'required');
var required = (field[0].outerHTML.indexOf(' required="true"') > 0 || field[0].outerHTML.indexOf(' required="required"') > 0);
var control = findControl(key);
var values = '';
var xml = field.html();
if (control && control.fromXML && xml.length > 0){ values = control.fromXML(xml); }
return {
control: findControl(key),
key: key,
label: label,
required: required,
values: values
};
}
function findControl(key){
return $.grep(controls, function(x){ return x.key === key; })[0];
}
function renderControl(control, label, values, required){
var html = [];
var checked = required ? 'checked="checked"': '';
html.push('<li class="frm-control" data-control="'+ control.key +'">');
html.push('<div class="frm-tite-bar" data-label="'+ label +'">');
html.push('<a href="#" class="frm-toggle">Show/Hide</a>');
html.push('<strong>'+ control.title +'</strong>');
html.push('</div>');
html.push('<div class="frm-contents">');
html.push('<div class="frm-field frm-field-required">');
html.push('<label>Required?</label>');
html.push('<input type="checkbox" '+ checked +' />');
html.push('</div>');
html.push('<div class="frm-field frm-field-label">');
html.push('<label>Label:</label>');
html.push('<input value="'+ label +'" type="text">');
html.push('</div>');
html.push('</div>');
html.push('<a href="#" class="btn-delete delete" title="Are you sure you want to delete this form field?">Delete</a>');
html.push('</li>');
if (control.render){
var li = $(html.join(''));
control.render(li, values);
return li[0].outerHTML;
}
else {
return html.join('');
}
}
function toXML(){
var xml = [];
xml.push('<fields>');
formFields.find('li').each(function(index,element){
element = $(this);
var type = element.attr('data-control');
var label = element.find('.frm-field-label input').val();
if (label === undefined){ label=''; }
var required = element.find('.frm-field-required :checkbox').is(':checked');
var control = findControl(type);
xml.push('<field type="'+ type +'" label="'+ label +'" required="'+ required +'">');
if (control && control.toXML){
xml.push(control.toXML(element));
}
xml.push('</field>');
});
xml.push('</fields>');
return xml.join('');
}
function serialize(){
return toXML();
}
});
};
$.fn.formBuilder.controls = [];
$.fn.formBuilder.AddControl = function(control){
/* Remove Existing */
for(var i = 0; i < $.fn.formBuilder.controls.length; i++) {if (window.CP.shouldStopExecution(1)){break;}
if($.fn.formBuilder.controls[i].key === control.key) {
$.fn.formBuilder.controls.splice(i, 1);
break;
}
}
window.CP.exitedLoop(1);
/* Add new control */
$.fn.formBuilder.controls.push(control);
/* Sort by title */
$.fn.formBuilder.controls = $.fn.formBuilder.controls.sort(function(a,b){
if (a.title < b.title) { return -1; }
if (a.title > b.title) { return 1; }
return 0;
});
};
$.fn.formBuilder.Control = function(key, title){
return {
key: key,
title: title
};
};
$.fn.formBuilder.ControlWithOptions = function(key, title, multipleSelect){
var control = $.fn.formBuilder.Control(key, title);
var optionRow = [];
optionRow.push('<div class="frm-field-option">');
optionRow.push('<input type="checkbox" />');
optionRow.push('<input type="text" />');
optionRow.push('<a href="#" class="btn-delete '+ control.key +'-remove" title="Are you sure you want to remove this option?">Remove</a>');
optionRow.push('</div>');
optionRow = optionRow.join('');
control.render = function(element, values){
var html = [];
html.push('<div class="frm-field frm-field-options">');
html.push('<label>Options:</label>');
if (values){ html.push(values); }
else { html.push(optionRow); }
html.push('<a href="#" class="btn-add '+ control.key +'-add" title="Add New Option">Add</a>');
html.push('</div>');
element.find('.frm-contents').append(html.join(''));
};
control.toXML = function(element){
var xml = [];
$('.frm-field-option', element).each(function(index, element){
var value = $('input[type=text]', this).val();
var selected = ($(':checked', this).length > 0);
xml.push('<opt value="'+ value +'" selected="'+ selected +'" />');
});
return xml.join('');
};
control.fromXML = function(xml){
var html = [];
$('<root>'+ xml +'</root>').find('opt').each(function(index, element){
var value = $(element).attr('value');
var selected = ($(element).attr('selected') === 'selected' || $(element).attr('selected') === 'true') ? ' checked="checked"' : '';
html.push(optionRow.replace('type="text"', 'type="text" value="'+ value +'"').replace('type="checkbox"', 'type="checkbox" '+ selected));
});
return html.join('');
};
control.init = function(container){
container.on('click.'+ control.key, 'a.'+ control.key +'-add', function(e){
e.preventDefault();
$(optionRow).insertBefore(this);
});
container.on('click.'+ control.key, 'a.'+ control.key +'-remove', function(e){
e.preventDefault();
$(this).parents('.frm-field-option').remove();
});
if (!multipleSelect){
container.on('click.'+ control.key, '[data-control="'+ control.key +'"] input:checkbox', function(e){
$(this).parents('.frm-field-options').find('input:checkbox').not(this).removeAttr('checked');
});
}
};
return control;
};
$.fn.formBuilder.AddControl($.fn.formBuilder.Control('text','Text'));
$.fn.formBuilder.AddControl($.fn.formBuilder.Control('textarea','Text (multiple)'));
$.fn.formBuilder.AddControl($.fn.formBuilder.ControlWithOptions('checkbox','Checkbox' ,true));
$.fn.formBuilder.AddControl($.fn.formBuilder.ControlWithOptions('radio','Radio Button' ,false));
$.fn.formBuilder.AddControl($.fn.formBuilder.ControlWithOptions('select','Select List' ,false));
$.fn.formBuilder.AddControl((function(){
var control = $.fn.formBuilder.Control('file', 'File Upload');
control.render = function(element, values){
element.find('.frm-contents').append('<div class="frm-field frm-field-extensions"><label>Accepted Extenions:</label><input value="'+ values +'" type="text"></div>');
};
control.toXML = function(element){
return '<extensions>'+ element.find('.frm-field-extensions input').val() +'</extensions>';
};
control.fromXML = function(xml){
return $(xml).text();
};
return control;
})());
$.fn.formBuilder.AddControl((function(){
var control = $.fn.formBuilder.Control('paragraph', 'Paragraph');
control.render = function(element, values){
element.find('.frm-field-required').remove();
var field = element.find('.frm-field-label');
field.find('label').text('Text:');
field.find('input').remove().end().append('<textarea rows="10">'+ values +'</textarea>');
};
control.toXML = function(element){
return '<text>'+ element.find('textarea').val() +'</text>';
};
control.fromXML = function(xml){
return $(xml).text();
};
return control;
})());
$.fn.formBuilder.AddControl((function(){
var control = $.fn.formBuilder.Control('email', 'Email');
control.render = function(element, values){
element.find('.frm-field-label input[value=""]').attr('value', 'Email');
};
return control;
})());
$.fn.formBuilder.AddControl((function(){
var control = $.fn.formBuilder.Control('selectState', 'Select List (State/Provinces)');
control.render = function(element, values){
element.find('.frm-field-label').append('<br /><small>Select list of States/Provinces</small>');
};
return control;
})());
})(jQuery);
$(function(){
$('#form').formBuilder({
save: function(xml){
console.log(xml);
$('#result').text(xml);
},
data: null// '<form><settings><function>False,False,False</function><description></description></settings><fields><field label="First Name" required="false" type="text"></field><field label="Last Name" required="true" type="text"></field><field label="Email Address" required="true" type="text"></field><field label="Phone Number" required="true" type="text"></field><field label="Race Registered For" required="true" type="select"><opt value="Marathon" selected="true" /><opt value="Half Marathon"></opt><opt value="10k"></opt><opt value="8k"></opt><opt value="5k"></opt><opt value="Kids Run"></opt></field><field label="City" required="true" type="text"></field><field label="State" required="true" type="select"></field><field label="Tell Us Your Story" required="true" type="textarea"></field><field label="" required="" type="paragraph"><text>Hello World</text></field></fields></form>'
});
$('#save').on('click', function(e){
e.preventDefault();
$('#form').trigger('save.formBuilder');
});
});
//# sourceURL=pen.js
</script>
</body></html>
