diff --git a/reference/forms/types/collection.rst b/reference/forms/types/collection.rst index 9c4688c0048..b88fcde794a 100644 --- a/reference/forms/types/collection.rst +++ b/reference/forms/types/collection.rst @@ -86,114 +86,6 @@ existing addresses. Adding new addresses is possible by using the `allow_add`_ option (and optionally the `prototype`_ option) (see example below). Removing emails from the ``emails`` array is possible with the `allow_delete`_ option. -Adding and Removing Items -~~~~~~~~~~~~~~~~~~~~~~~~~ - -If `allow_add`_ is set to ``true``, then if any unrecognized items are submitted, -they'll be added seamlessly to the array of items. This is great in theory, -but takes a little bit more effort in practice to get the client-side JavaScript -correct. - -Following along with the previous example, suppose you start with two -emails in the ``emails`` data array. In that case, two input fields will -be rendered that will look something like this (depending on the name of -your form): - -.. code-block:: html - - - - -To allow your user to add another email, just set `allow_add`_ to ``true`` -and - via JavaScript - render another field with the name ``form[emails][2]`` -(and so on for more and more fields). - -To help make this easier, setting the `prototype`_ option to ``true`` allows -you to render a "template" field, which you can then use in your JavaScript -to help you dynamically create these new fields. A rendered prototype field -will look like this: - -.. code-block:: html - - - -By replacing ``__name__`` with some unique value (e.g. ``2``), -you can build and insert new HTML fields into your form. - -Using jQuery, a simple example might look like this. If you're rendering -your collection fields all at once (e.g. ``form_row(form.emails)``), then -things are even easier because the ``data-prototype`` attribute is rendered -automatically for you (with a slight difference - see note below) and all -you need is this JavaScript code: - -.. code-block:: javascript - - // add-collection-widget.js - jQuery(document).ready(function () { - jQuery('.add-another-collection-widget').click(function (e) { - var list = jQuery(jQuery(this).attr('data-list-selector')); - // Try to find the counter of the list or use the length of the list - var counter = list.data('widget-counter') || list.children().length; - - // grab the prototype template - var newWidget = list.attr('data-prototype'); - // replace the "__name__" used in the id and name of the prototype - // with a number that's unique to your emails - // end name attribute looks like name="contact[emails][2]" - newWidget = newWidget.replace(/__name__/g, counter); - // Increase the counter - counter++; - // And store it, the length cannot be used if deleting widgets is allowed - list.data('widget-counter', counter); - - // create a new list element and add it to the list - var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget); - newElem.appendTo(list); - }); - }); - -And update the template as follows: - -.. code-block:: html+twig - - {{ form_start(form) }} - {# ... #} - - {# store the prototype on the data-prototype attribute #} -