@@ -653,7 +653,31 @@ field according to the current selection in the ``sport`` field:
653653 {# ... #}
654654 {{ form_end(form) }}
655655
656- ..include ::/cookbook/form/dynamic_form_modification_ajax_js.rst.inc
656+ <script>
657+ var $sport = $('#meetup_sport');
658+ // When sport gets selected ...
659+ $sport.change(function(){
660+ // ... retrieve the corresponding form.
661+ var $form = $(this).closest('form');
662+ // Simulate form data, but only include the selected sport value.
663+ var data = {};
664+ data[$sport.attr('name')] = $sport.val();
665+ // Submit data via AJAX to the form's action path.
666+ $.ajax({
667+ url : $form.attr('action'),
668+ type: $form.attr('method'),
669+ data : data,
670+ success: function(html) {
671+ // Replace current position field ...
672+ $('#meetup_position').replaceWith(
673+ // ... with the returned one from the AJAX response.
674+ $(html).find('#meetup_position')
675+ );
676+ // Position field now displays the appropriate positions.
677+ }
678+ });
679+ });
680+ </script>
657681
658682 ..code-block ::html+php
659683
@@ -664,7 +688,31 @@ field according to the current selection in the ``sport`` field:
664688 <!-- ... -->
665689 <?php echo $view['form']->end($form) ?>
666690
667- ..include ::/cookbook/form/dynamic_form_modification_ajax_js.rst.inc
691+ <script>
692+ var $sport = $('#meetup_sport');
693+ // When sport gets selected ...
694+ $sport.change(function(){
695+ // ... retrieve the corresponding form.
696+ var $form = $(this).closest('form');
697+ // Simulate form data, but only include the selected sport value.
698+ var data = {};
699+ data[$sport.attr('name')] = $sport.val();
700+ // Submit data via AJAX to the form's action path.
701+ $.ajax({
702+ url : $form.attr('action'),
703+ type: $form.attr('method'),
704+ data : data,
705+ success: function(html) {
706+ // Replace current position field ...
707+ $('#meetup_position').replaceWith(
708+ // ... with the returned one from the AJAX response.
709+ $(html).find('#meetup_position')
710+ );
711+ // Position field now displays the appropriate positions.
712+ }
713+ });
714+ });
715+ </script>
668716
669717The major benefit of submitting the whole form to just extract the updated
670718``position `` field is that no additional server-side code is needed; all the
