Form para adicionar conteudo para curso dinamicamente.

by Yure Pereira

HTML

<form action="">

  <div id="list-contest">
    <ol class="item-list">
      <li>
        <label for="">Titulo:</label><input type="text" name="txt_dia_titulo[0]">
        <ol class="sub-item-list">
          <li>
            <label for="">Item:</label><input type="text" name="txt_sub_titulo[0][0]">
          </li>
        </ol>
        <input type="button" class="btn-add-topic" value="Add New Topic">
      </li>
    </ol>
    <input type="button" class="btn-add-title" value="Add New Title">
  </div>
  
</form>

CSS

#list-contest input[type=text] {
  background: #fff;
  border: 1px solid #ccc;
  width: 70%;
  box-shadow: 0 3px 5px #eee;
  line-height: 1;
  padding: 7px !important;
  resize: none;
  outline: none;
  border-radius: 3px;
}

#list-contest label {
  display: inline-block;
  width: 10%;
}

#list-contest input[type=button] {
  color: #ffffff;
  background-color: #c9302c;
  border-color: #761c19;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 1.42857143;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#list-contest {
  font-family: arial;
  font-size: 12px;
}

#list-contest .item-list {
    background: #eee;
    padding: 5px;
}

#list-contest .item-list > li {
  background: #eee;
}

#list-contest .item-list ol {
  margin: 5px 0;
}

#list-contest .item-list ol li {
  background: #ddd;  
}

#list-contest .item-list li {
  list-style-position: inside;
  margin: 5px;
  padding: 5px;
}

#list-contest .ui-sortable-helper {
  border: 1px dashed #f00;
}

JavaScript

$(function() {

	var createTopic = function(indexTitle, indexTopic) {
  
  	var wrapper = $('<li />');
    
    $('<label />', {
    	for: '',
      text: 'Item:',
    }).appendTo(wrapper);
    
    //Campos de texto:
    $('<input />', {
    	type: 'text',
      name: 'txt_sub_titulo[' + indexTitle + '][' + indexTopic + ']',
    }).appendTo(wrapper);
    
    $('<input />', {
    	type: 'button',
      class: 'btn-remove-item',
      value: 'X',
      title: 'Remove This Item'
    }).appendTo(wrapper);
    
    return wrapper;
  
  };
          
	var createTitle = function() {
  	
  	var wrapper = $('<li />'),
   			indexTitle = $('#list-contest > ol.item-list > li').length;
    
    $('<label />', {
    	for: '',
      text: 'Titulo:'
    }).appendTo(wrapper);
    
    $('<input />', {
    	type: 'text',
      name: 'txt_dia_titulo[' + indexTitle + ']'
    }).appendTo(wrapper);
    
    $('<input />', {
    	type: 'button',
      class: 'btn-remove-topic',
      value: 'X',
      title: 'Remove This Topic'
    }).appendTo(wrapper);
    
    $('<ol />', {
      class: 'sub-item-list',
      value: 'X',
      title: 'Remove This Topic'
    }).append(createTopic(indexTitle, 0))
    	.appendTo(wrapper);
      
    $('<input />', {
    	type: 'button',
      class: 'btn-add-topic',
      value: 'Add New Topic'
    }).appendTo(wrapper);
    
    return wrapper;
    
  };

	//Add new item topic list:
  var addTopic = function() {
  
  	var father = $(this).parent(),
    		listFather = father.find('ol.sub-item-list');
        
    var indexTitle = listFather.length - 1,
    	indexTopic = listFather.find('li').length;
    
      	listFather.append(createTopic(indexTitle, indexTopic));
        
		$('.btn-remove-item').click(removeItem);
  
  };
  
  //Remove item list:
  var removeItem = function() {
  
  	var father = $(this).parent();

    father.fadeOut('slow', function() {
    //father.slideUp( "slow", function() {
    		$(this).remove();
  	});
  
  };
  
  var...