Symfony form sent with AJAX

Question

I want to send a Symfony form with AJAX. I already did it but I can't find the error in my code. When I click on Submit, it's sending the form but not with AJAX.

Create form in controller :

$form = $this->createForm(CorrectionReponseQRFormType::class, $passage)->createView();

Twig :

{{ form_start(form, {'id': 'formCorrection'~reponse.id}) }}

      {{ form_widget(form.note, {'id': 'note'~reponse.id}) }}

      {{ form_widget(form.commentaire, {'id': 'commentaire'~reponse.id}) }}

      {{ form_row(form.submit) }}
{{ form_end(form) }}

<script>
    var note = document.getElementById("note{{ reponse.id }}").value;
    var idCommentaire = 'commentaire{{ reponse.id }}';

    var commentaire = CKEDITOR.instances[idCommentaire].getData();
    $("#formCorrection{{ reponse.id }}").submit(function() {
        $.ajax({
            type: "POST",
            url: "{{ path('paces_colle_correctioncolleqr_sauvegardercorrectionpassage') }}",
            data: {note: note, commentaire: commentaire, idReponse: {{ reponse.id}}}
        })
    });
</script>

Controller function :

public function sauvegarderCorrectionPassageAction(Request $request)
{
    if ($request->isXmlHttpRequest()) {
        $em = $this->getDoctrine()->getManager();

        $idReponse = $request->request->get('idReponse');
        $reponse = $em->getRepository(ReponseQR::class)->find($idReponse);
        $note = $request->request->get('note');
        $commentaire = $request->request->get('commentaire');

        $passerColle = $em->getRepository(PasserColle::class)
            ->findOneBy(array('colle' => $reponse->getColle()->getId(),
                'user' => $reponse->getUser()->getId()));

        $reponse->setCorrigee(true);
        $passerColle->setNote($note);
        $passerColle->setCommentaire($commentaire);
        $em->persist($passerColle);
        $em->flush();

        // Affichage
        return false;
    }
}

Can you share Ajax request code?

Gopal Joshi
– Gopal Joshi

2017-01-30 12:05:15 +00:00
Commented Jan 30, 2017 at 12:05 — Gopal Joshi
– Gopal Joshi, Commented Jan 30, 2017 at 12:05
It's at the end of the Twig

Kristen Joseph-Delaffon
– Kristen Joseph-Delaffon

2017-01-30 12:08:25 +00:00
Commented Jan 30, 2017 at 12:08 — Kristen Joseph-Delaffon
– Kristen Joseph-Delaffon, Commented Jan 30, 2017 at 12:08

Qamar Hafeez · Accepted Answer · 2017-01-30 12:20:40Z

2

or you may use return FALSE; at the end of the function like this

$("#formCorrection{{ reponse.id }}").submit(function(event) {
        $.ajax({
            type: "POST",
            url: "{{ path('paces_colle_correctioncolleqr_sauvegardercorrectionpassage') }}",
            data: {note: note, commentaire: commentaire, idReponse: {{ reponse.id}}}
        });
        return false;
});

answered Jan 30, 2017 at 12:20

Qamar Hafeez

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

goto · Accepted Answer · 2017-01-30 12:19:29Z

1

It's because submit button submit the form by default.

You can use event.preventDefault()

 $("#formCorrection{{ reponse.id }}").submit(function(event) {
        event.preventDefault();
        event.stopPropagation();
        $.ajax({
            type: "POST",
            url: "{{ path('paces_colle_correctioncolleqr_sauvegardercorrectionpassage') }}",
            data: {note: note, commentaire: commentaire, idReponse: {{ reponse.id}}}
        })
    });

edited Jan 30, 2017 at 12:19

answered Jan 30, 2017 at 12:12

goto

8,21210 gold badges50 silver badges60 bronze badges

2 Comments

goto Over a year ago

are you sure your "#formCorrection{{ reponse.id }}" is correctly targeting your DOM? Can you try to add event.stopPropagation(); ?

Kristen Joseph-Delaffon Over a year ago

Form ID was not set correctly. It's working now for this part. Thank you.

Collectives™ on Stack Overflow

Symfony form sent with AJAX

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related