When you're building this form to display to the user for the first time,

You can see that you need to listen on these two events and have different callbacks

only because in two different scenarios, the data that you can use is available in different events.

Other than that, the listeners always perform exactly the same things on a given form.

You can see that you need to listen on these two events and have different

callbacks only because in two different scenarios, the data that you can use is

available in different events. Other than that, the listeners always perform

exactly the same things on a given form.

One piece that is still missing is the client-side updating of your form after

the sport is selected. This should be handled by making an AJAX call back to

your application. Assume that you have a sport meetup creation controller::

One piece that may still be missing is the client-side updating of your form

after the sport is selected. This should be handled by making an AJAX call

back to your application. In that controller, you can submit your form, but

instead of processing it, simply use the submitted form to render the updated

fields. The response from the AJAX call can then be used to update the view.

The associated template uses some JavaScript to update the ``position`` form

field according to the current selection in the ``sport`` field. To ease things

it makes use of `jQuery`_ library and the `FOSJsRoutingBundle`_:

..code-block::html+jinja

{# src/Acme/DemoBundle/Resources/views/Meetup/create.html.twig #}

{{ form_start(form) }}

{{ form_row(form.sport) }} {# <select id="meetup_sport" ... #}

{{ form_row(form.position) }} {# <select id="meetup_position" ... #}

{# ... #}

{{ form_end(form) }}

{# ... Include jQuery and scripts from FOSJsRoutingBundle ... #}

<script>

$(function(){

// When sport gets selected ...

$('#meetup_sport').change(function(){

var $position = $('#meetup_position');

// Remove current position options except first "empty_value" option

$position.find('option:not(:first)').remove();

var sportId = $(this).val();

if (sportId) {

// Issue AJAX call fetching positions for selected sport as JSON

$.getJSON(

// FOSJsRoutingBundle generates route including selected sport ID

Routing.generate('meetup_positions_by_sport', {id: sportId}),

function(positions) {

// Append fetched positions associated with selected sport

$.each(positions, function(key, position){

$position.append(new Option(position[1], position[0]));

});

}

);

}

});

});

</script>

The last piece is implementing a controller for the

``meetup_positions_by_sport`` route returning the positions as JSON according

to the currently selected sport. To ease things again the controller makes use

of the:doc:`@ParamConverter</bundles/SensioFrameworkExtraBundle/annotations/converters>`

listener to convert the submitted sport ID into a ``Sport`` object::

..note::

The returned JSON should not be created from an associative array

(``$result[$position->getId()] = $position->getName())``) as the iterating

order in JavaScript is undefined and may vary in different browsers.

.. _cookbook-dynamic-form-modification-suppressing-form-validation:

By doing this, you may accidentally disable something more than just form

validation, since the ``POST_SUBMIT`` event may have other listeners.

.. _`jQuery`:http://jquery.com

.. _`FOSJsRoutingBundle`:https://github.com/FriendsOfSymfony/FOSJsRoutingBundle