@@ -653,7 +653,31 @@ field according to the current selection in the ``sport`` field:
653
653
{# ... #}
654
654
{{ form_end(form) }}
655
655
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>
657
681
658
682
.. code-block :: html+php
659
683
@@ -664,7 +688,31 @@ field according to the current selection in the ``sport`` field:
664
688
<!-- ... -->
665
689
<?php echo $view['form']->end($form) ?>
666
690
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>
668
716
669
717
The major benefit of submitting the whole form to just extract the updated
670
718
``position `` field is that no additional server-side code is needed; all the
0 commit comments