Jquery Dynamic Form

Dynamic form with add number auto

by cassfinn

HTML

<div>
 <h4>Create Dynamic Form</h4>
 </div>
 
<table id="field">
    <tr>
        <td><input type="text" placeholder="Enter form label" id="label"/></td>
        <td><select name='type' id='select_id'>
              <option value=1>Text Field</option>
              <option value=2>Select List</option>
              <option value=3>Button</option>
            </select>
        </td>
        <td><input type="button" value="remove" onClick="$(this).closest('tr').remove()"/></td>
     </tr>
</table>

<button type="button" id="addField">Create Form Control</button>
<button type="button" id="previewForm">Preview Form</button>


<div class="container">
 
</div>

<script id="template" type="text/template">
    <tr>
        <td><input type="text" placeholder="Enter form label" id="label"/></td>
      	<td><select name='type' id='select_id'>
              <option value=1>Text Field</option>
              <option value=2>Select List</option>
              <option value=3>Button</option>
            </select>
        </td>        
        <td><input type="button" value="remove"  onClick="$(this).closest('tr').remove()" /></td>
     </tr>
</script>

CSS

.container {
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  font-size: 25px;
  transition: all 0.2s;
  width: 400px;
  height: auto;
  border: solid;
  border-width: 1px;
  border-color: #00ffac;
  margin: 32px 16px 16px 32px; 
}

h3 { 
    color: white; 
    background: #00ffac;
    font-family: 'helvetica';
    font-size: 0.5em;
    transform: translateY(-3rem);
    height: 16px;
    width: 120px;
    padding: 8px 8px 8px 8px;
    text-align: center;
 } 
 h4 { 
    color: #fff; 
    background: #00ffac;
    font-family: 'helvetica';
    font-size: 0.8em;
    transform: translateY(3rem);
    height: 16px;
    width: 160px;
    padding: 8px 8px 8px 8px;
    text-align: center;
    margin-left:48px;
 } 


input[type=text] {
    width: 200px;
    height: 30px;
    padding: 12px 12px;
    margin: 4px 4px 4px 4px;
    box-sizing: border-box;
}
select {
    width: 100px;
    padding: 16px 20px;
    margin: 4px 4px 4px 4px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
    height: 30px;
}
input[type=button], input[type=submit], input[type=reset] {
    background-color: gray;
    border: none;
    color: white;
    padding: 8px 8px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    height: 30px;
    width: 100px;
}
button {
    background-color: green;
    border: none;
    color: white;
    padding: 8px 8px;
    text-decoration: none;
    cursor: pointer;
    height: 30px;
    width: 200px;
    margin: 8px 8px 8px 32px;
}
table {
  border: solid;
  border-width: 1px;
  border-color: #00ffac;
  margin: 32px 16px 24px 32px;
  padding: 48px 8px 8px 8px;
}

.text-header { 
    color: white; 
    text-align: center; 
    top: 22px; 
    width: 210px; 
    height: 16px;
    left: 54px; 
    position: absolute; 
    background: #00ffac;
    font-family: 'helvetica';
    font-size: 0.5em;
 }

.buttonPreview {
    background-color: #0033ff;
    border: none;
    color: white;
    padding: 8px 8px;
   ...

JavaScript

$( document ).ready(function() {
     
    $("#addField").click(function( event ) {
        $($("#template").html()).appendTo($("#field tbody")).show( "slow" );
        event.preventDefault();
    });
    
    $("#previewForm").click(function( event ) {
    		
    		$(".container").empty();
        $(".container").append( $("<h3>Generated Form</h3>") );
         
        var label = "";
        
        $('#field').find('input, select').each(function(){ 
      
						if (this.id == "label") {                
                label = this.value;
             }  else if (this.id == "select_id") {
            		if (this.value == 1) {
            				$(".container").append( $("<div id='fieldLabel'>" + label + "<input type='text' value='Text Field'></input></div>") );            
                } else if (this.value == 2) {
            				$(".container").append( $("<div id='fieldLabel'>" + label + "<select name='select' value='select'><option>Select List</option></select></div>") );   
                } else if (this.value == 3) {
            				$(".container").append( $("<div id='buttonPreview'><button>" + label + "</button></div>") );                     
                }
             }         
        });

     });
    
});