Dynamic Form

Dynamic Form

by Amit Kumar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ul id="frmb-control-box" class="frmb-control ui-sortable connectedSortable">
	<li class="ui-sortable-handle" label="Text Field" data-field-type="1">
		<span>Text Field</span>
	</li>
	<li class="ui-sortable-handle" label="Text Area" data-field-type="2">
	<span>Text Area</span>
	</li>
	<li class="ui-sortable-handle" label="Checkbox" data-field-type="3">
		<span>Checkbox</span>
	</li>
	<li class="ui-sortable-handle" label="Select" data-field-type="4">
		<span>Select</span>
	</li>	
	<li class="ui-sortable-handle" label="Radio Group" data-field-type="5">
		<span>Radio Group</span>
	</li>
	
</ul>
<ul id="form-Container" class="connectedSortable">
  
</ul>
<p>
<input type="button" class="btn btn-default button-input" id="btnSaveForm" value="Save Form" />
</p>
<div class="form-action-container">
	<div class="field-actions">
		<a id="edit_frm_0" class="btn" title="Edit"><i class="fa fa-edit"> </a>
		<a id="del_frmb_0" class="btn" title="Remove Element">×</a>
	</div>
</div>

CSS

#sortable1,#sortable2{border:1px solid #eee;width:142px;min-height:20px;list-style-type:none;margin:0;padding:5px 0 0;float:left;margin-right:10px}#sortable1 li,#sortable2 li{margin:0 5px 5px;padding:5px;font-size:1.2em;width:120px}.frmb-control{width:200px!important}#form-Container{border:1px solid red;max-width:500px;min-height:50px}#form-Container > li{list-style:none}.btn-group-vertical>.btn:not(:first-child):not(:last-child),.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle),.fb-mobile .form-actions>.btn:not(:first-child):not(:last-child){border-radius:0}.btn,.btn-group{vertical-align:middle}.btn,.frmb-control li{-moz-user-select:none;-ms-user-select:none}.btn,.btn.active,.btn.btn-active,.btn:active,.form-control{background-image:none}.btn-group,.btn-group>.btn,.frmb li,.input-group{position:relative}*{box-sizing:border-box}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}.btn,.frmb .prev-holder label,.frmb li.disabled label,.frmb li.no-fields label{font-weight:400}textarea{overflow:auto}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}.btn-group{display:inline-block}.btn-group>.btn{float:left}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-group .input-group .form-control:last-child,.btn-group .input-group-addon:last-child,.btn-group .input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.btn-group .input-group-btn:first-child>.btn:not(:first-child),.btn-group .input-group-btn:last-child>.btn,.btn-group .input-group-btn:last-child>.btn-group>.btn,.btn-group...

JavaScript

var $form_action_container=$('.form-action-container');
  var fieldType={};
	fieldType[1]="textbox";
	fieldType[2]="textarea";
	fieldType[3]="checkbox";
	fieldType[4]="select";
	fieldType[5]="radio";

$(function() {
	$(".ui-sortable-handle").draggable({ 
		helper: "clone",
	    cursor: "move", 
	    cancel: null  
	 });

    $("#form-Container").droppable({
        drop: function(event, ui) {
        	var getFieldType=ui.draggable.attr('data-field-type');
        	var createFormElement="";
        	switch (fieldType[getFieldType]) {
        		case "textbox":
        			createFormElement=createTextBox();
        		break;
        		case "textarea":
        			createFormElement=createTextArea();
        		break;
        		case "checkbox":
        			createFormElement=createCheckBox();
        		break;
        		case "select":
        			createFormElement=createSelectBox();
        		break;
        		case "radio":
        			createFormElement=createRadioGroup();
        		break;	
        	}
            $(this).append(createFormElement);
        }
    });

    $('#btnSaveForm').on('click',function(){
    	//Here I want to generate Json for Dynamic created form
    	var formDetails = [

    	{
    		"type":"textbox",
    		"label":"Please enter your name",
    		"id":"txt-1465133974748"
    	},
    	{
    		"type":"select",
    		"label":"Please Select Option",
    		"id":"select-1865133974748",
    		"fieldOptionDetails":[
    		{
    			"fieldLabel":"Option 1",
    			"fieldValue":"1"
    		},
    		{
    			"fieldLabel":"Option 2",
    			"fieldValue":"2"
    		}]
    	}];
    });
});

function createTextBox(){
	var getRandomNum = new Date().getTime();
	var createFormElement="";
	createFormElement +="<li class='text-field form-field data-type='1'>";
	createFormElement += $form_action_container.html();
	createFormElement +="<label>Please enter your name</label>";
	createFormElement += "<input type='text' id='txt-"+getRandomNum+"' class='form-control...