Basic usage

This is a collection of simple text fields using the plugin with all default options.

Add, move, remove values and press Submit.
Value
Value
Value

Value :a

Value :b

Value :c


Code used to initialize the collection:

    <script type="text/javascript">
        $('.my-selector').collection();
    </script>

Full Symfony code:

File: Controller/Basic/SimpleCollectionController.php
<?php

namespace Fuz\AppBundle\Controller\Basic;

use Fuz\AppBundle\Base\BaseController;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\Form\Extension\Core\Type;
use Symfony\Component\HttpFoundation\Request;

/**
 * @Route("/basic")
 */
class SimpleCollectionController extends BaseController
{
    /**
     * A simple collection that even don't use an entity.
     *
     * @Route("/simple-collection", name="basic")
     * @Template()
     */
    public function simpleCollectionAction(Request $request)
    {
        $data = ['values' => ['a', 'b', 'c']];

        $form = $this
           ->createFormBuilder($data)
           ->add('values', Type\CollectionType::class, [
               'entry_type'    => Type\TextType::class,
               'entry_options' => [
                   'label' => 'Value',
               ],
               'label'        => 'Add, move, remove values and press Submit.',
               'allow_add'    => true,
               'allow_delete' => true,
               'prototype'    => true,
               'required'     => false,
               'attr'         => [
                   'class' => 'my-selector',
               ],
           ])
           ->add('submit', Type\SubmitType::class)
           ->getForm()
        ;

        $form->handleRequest($request);
        if ($form->isValid()) {
            $data = $form->getData();
        }

        return [
                'form' => $form->createView(),
                'data' => $data,
        ];
    }
}
File: Controller/Basic/SimpleCollectionController.php
File: Resources/views/Basic/SimpleCollection/simpleCollection.html.twig
{% extends 'FuzAppBundle::layout.html.twig' %}

{% block extra_js %}
    <script src="{{ asset('js/jquery.collection.js') }}"></script>
{% endblock %}

{% block title %}Basic usage{% endblock %}

{% block body %}

    <h2>Basic usage</h2>

    <p>This is a collection of simple text fields using the plugin with all default options.</p>

    {% form_theme form 'jquery.collection.html.twig' %}
    {{ form(form) }}

    <hr/>

    {% for value in data.values %}
        <p>Value : {{ value }}</p>
    {% endfor %}

    <hr/>

    <p>Code used to initialize the collection:</p>
    <pre>{{ block('script') | e }}</pre>

    <p>Full Symfony code:</p>
    {{
        tabs([
            'Controller/Basic/SimpleCollectionController.php',
            'Resources/views/Basic/SimpleCollection/simpleCollection.html.twig',
        ])
    }}

{% endblock %}

{% block script %}

    <script type="text/javascript">
        $('.my-selector').collection();
    </script>

{% endblock %}
File: Resources/views/Basic/SimpleCollection/simpleCollection.html.twig