gistfile1.twig

<form action="{{action}}" method="post" {{ form_enctype(form)}} >
	{{form_errors(form)}}
	<legend>{{legend}}</legend>

	<ul>
		<li>
			{{ form_errors(form.title) }}
			{{ form_label(form.title) }}
			{{ form_widget(form.title) }}
		</li>
	</ul>

	<!-- Categories -->
{{ form_label(form.categories) }}
{{ form_errors(form.categories) }}


<ul id="categories-fields-list" data-prototype="{{ form_widget(form.categories.vars.prototype) | e }}">
{% for categoryField in form.categories %}
    <li>
        {{ form_errors(categoryField) }}
        {{ form_widget(categoryField) }}
    </li>
{% endfor %}
</ul>
	{{form_widget(form)}}
	

<script type="text/javascript">
	var categoryHolder = $('#categories-fields-list');
	var $addCatLink = $('<a href="#" class="add_cat_link">Add a category</a>');
	var $newLinkLi = $('<li></li>').append($addCatLink);
	
    // keep track of how many category fields have been rendered
    //var categoryCount = '{{ form.categories | length }}';

    jQuery(document).ready(function() {
		categoryHolder.append($newLinkLi);
		categoryHolder.data('index', categoryHolder.find(':input').length);
		categoryHolder.find('li').each(function() {
			addCategoryFormDeleteLink($(this));
		});

		$addCatLink.on('click', function(e) {
			// prevent the link from creating a "#" on the URL
			e.preventDefault();

			if ( categoryHolder.find(':input').length < 3 )
				addCollectionForm(categoryHolder, $newLinkLi);
		});
    });


	function addCollectionForm(collectionHolder, $newLinkLi) {
		// Get the data-prototype explained earlier
		var prototype = collectionHolder.data('prototype');

		// get the new index
		var index = collectionHolder.data('index');

		// Replace '__name__' in the prototype's HTML to
		// instead be a number based on how many items we have
		var newForm = prototype.replace(/__name__/g, index);

		// increase the index with one for the next item
		collectionHolder.data('index', index + 1);

		// Display the form in the page in an li, before the "Add a tag" link li
		var $newFormLi = $('<li></li>').append(newForm);
		$newLinkLi.before($newFormLi);
		addCategoryFormDeleteLink($newFormLi);
	}

	function addCategoryFormDeleteLink($tagFormLi) {
		var $removeFormA = $('<a href="#"> X</a>');
		$tagFormLi.append($removeFormA);

		$removeFormA.on('click', function(e) {
			// prevent the link from creating a "#" on the URL
			e.preventDefault();

			// remove the li for the tag form
			$tagFormLi.remove();
		});
	}
</script>


	{{form_rest(form)}}
	<input class="btn btn-info" type="submit" name="submit">
</form>