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.

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::

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.

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

field according to the current selection in the ``sport`` field:

..configuration-block::

..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::/cookbook/form/dynamic_form_modification_ajax_js.rst.inc

..code-block::html+php

<!-- src/Acme/DemoBundle/Resources/views/Meetup/create.html.php -->

<?php echo $view['form']->start($form) ?>

<?php echo $view['form']->row($form['sport']) ?> <!-- <select id="meetup_sport" ... -->

<?php echo $view['form']->row($form['position']) ?> <!-- <select id="meetup_position" ... -->

<!-- ... -->

<?php echo $view['form']->end($form) ?>

..include::/cookbook/form/dynamic_form_modification_ajax_js.rst.inc

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 major benefit of submitting the whole form to just extract the updated

``position`` field is that no additional server-side code is needed; all the

code from above to generate the submitted form can be reused.

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

<script>

var $sport = $('#meetup_sport');

$sport.change(function(){

var $form = $(this).closest('form');

var data = {};

data[$sport.attr('name')] = $sport.val();

$.ajax({

url : $form.attr('action'),

type: $form.attr('method'),

data : data,

success:function(html) {

$('#meetup_position').replaceWith(

$(html).find('#meetup_position')

);

}

});

});

</script>