Symfony2 Form + Ajax: Récupérer les valeurs envoyées par un formulaire avec Ajax

Version imprimable

Bonjour,

J'ai externalisé mon formulaire dans une classe.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
class rechercheFormType extends AbstractType
{
        /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
 
            ->add('dateDebut', DateTimeType::class, array(
                'date_widget' => 'single_text',
                'data' => new \DateTime('-1 day 06:30'),
                'attr'=>array('id'=>'dateDebut')))
 
            ->add('dateFin', DateTimeType::class, array(
                'date_widget' => 'single_text',
                'data' => new \DateTime('now 07:30'),
                'attr'=>array('id'=>'dateFin')))
            ->add('rechercher', SubmitType::class, array('label'=>'rechercher','attr'  => array('class' => 'btn btn-primary')))
 
 
        ;
    }
 
 
}

Mon controller construit mon formulaire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
public function searchAction(Request $request){
 
       $form   = $this->createForm(new rechercheFormType());
 
       if ($request->getMethod() == 'POST') {
           $form->handleRequest($request);
           $data = $form->getData();
 
       }else{
           return $this->render('PQTMainBundle:Pqt:search.html.twig', array('form' => $form->createView() ));
       }
 
   }

J'ai ma vue "search.html.twig" qui affiche ce formulaire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<form action="{{ path('ma route') }}" method="POST" class="form-inline" >
            <div class="well">
                <span class="row">
 
                    <span class="col-md-3 ">
                        {{ form_errors(form.dateDebut) }}
                        {{ form_label(form.dateDebut) }}
                        {{ form_widget(form.dateDebut) }}
 
                    </span>
                    <span class="col-md-3">
                        {{ form_errors(form.dateFin) }}
                        {{ form_label(form.dateFin) }}
                        {{ form_widget(form.dateFin) }}
                    </span>
                    <span class="col-md-1">
                        {{ form_label(form.dateFin) }}
                        {{ form_widget(form.rechercher) }}
                    </span>
                </span>
            </div>
            {{ form_rest(form) }}
        </form>

Je voudrais dans la vue "search.html.twig" pouvoir lors du submit lancer une requête ajax qui:

Me récupère les valeurs du formulaire
Lance une requete (route->controller->action)
M'affiche en dessous du formulaire dans une "div" le résultat
Je ne sais pas trop comment organiser tout ça du coté du contrôleur.

Quelqu'un peut-il m'orienter ou me conseiller.

Merci d'avance pour votre aide.

04/05/2017, 13h16
MehrezLabidi

Bonjour,
rien de compliqué du tout .
la vue search.twig.html contient du code javasccript ( ajax+Jquery) , un event javascript pour lancer l'appel ajax .
l'url ajax est une route exposable.
cette route corresponds à une action controlleur avec xmlhttprequest et qui retourne neew reponse json.
du coté de l'ajaxx , on success on recupere le json result de l'action ;)

Merci pour ton retour ,

Je suis encore très novice sur symfony.

J'ai essayé de prendre en compte tes conseils mais soit indulgent avec moi :oops:

J'ai modifié mon formulaire en appelant ma fonction javascript sur un onsubmit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<form  method="POST" class="form-inline" id="monForm" onsubmit="showResultat(this.id)">
            <div class="well">
                <span class="row">
                    <span class="col-md-3 ">
                        {{ form_errors(form.dateDebut) }}
                        {{ form_label(form.dateDebut) }}
                        {{ form_widget(form.dateDebut) }}
 
                    </span>
                    <span class="col-md-3">
                        {{ form_errors(form.dateFin) }}
                        {{ form_label(form.dateFin) }}
                        {{ form_widget(form.dateFin) }}
                    </span>
                    <span class="col-md-1">
                        {{ form_label(form.dateFin) }}
                        {{ form_widget(form.rechercher ) }}
                    </span>
                </span>
            </div>
            {{ form_rest(form) }}
        </form>

J'essai de récupérer dans la fonction js "showResultat" un des champs de mon formulaire pour l'envoyer à mon contrôler.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script type="text/javascript">
        function showResultat(id) {
 
            var dateDebut = document.id.dateDebut.value;
 
            alert(dateDebut);
 
            $.ajax({
                type: "GET",
                url: "{{ path('monpath') }}",
                data: {'dateDebut': dateDebut},
                cache: false,
                success: function (data) {
                    $('#recherche').html(data);
                }
            });
 
            return false;
 
        }
    </script>

Ici l'alerte n'affiche rien du tout

05/05/2017, 21h45
MehrezLabidi

voila un exemple de recherche instantanée http://blog.arnaud-k.fr/2010/09/14/t...erche-en-ajax/
c'est du php native ok , mais c'est presque la même chose