Symfony form submit without reloading the page

Question

I know that this question has already been laid but I can't found how to fix my problem.

So I've got a Symfony project. In this project, I need to place markers on a map and when I click on those markers, a modal window opens up with a form . This works fine. My problem is that when I want to submit the form of a marker, the page is reloaded and all the present markers are deleted and I don't want it. I search on many websites and tutorials and I found that using ajax is 'the best' solution, but when I try to use it, nothing happend.

Here is my ajax function :

$('#formStep').on('submit', function(e) {
   e.preventDefault();

   $.ajax({
      type: $(this).attr('method'),
      url : $(this).attr('action'),
      data: $(this).serialize()
   });
});

The template/form :

 <div class="modal-body">
    {{ form_start(formEtape, {'id': 'formStep', 'attr': {'action': path('h3_k_add_step')}}) }}
    <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active"><a href="#Nom" aria-controls="home" role="tab" data-toggle="tab">Nom</a></li>
      <li role="presentation"><a href="#Question" aria-controls="profile" role="tab" data-toggle="tab">Question</a></li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="Nom">
        <div class="input-group" style="margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;">
          <span class="input-group-addon" id="basic-addon1">Nom*</span>
          {{ form_widget(formEtape.nom, {'attr': {'class': 'form-control input-sm glowing-border'}}) }}
        </div>
        <div class="input-group" style="margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;">
          {{ form_widget(formEtape.longitude, {'id': 'etape_longitude', 'attr': {'class': 'form-control input-sm glowing-border'}}) }}
        </div>
        <div class="input-group" style="margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;">
          {{ form_widget(formEtape.latitude, {'id': 'etape_latitude', 'attr': {'class': 'form-control input-sm glowing-border'}}) }}
        </div>
        <div class="input-group" style="margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;">
          <span class="input-group-addon" id="basic-addon1">Indication pour se rendre <br>à l'étape suivante</span>
          {{ form_widget(formEtape.transit, {'attr': {'class': 'form-control input-sm glowing-border'}}) }}
        </div>
      </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    {{ form_widget(formEtape.submit, {'id': 'step_submit', 'attr': {'class': 'btn btn-success'}}) }}
    {{ form_end(formEtape) }}
  </div>

and the controller :

public function addStepAction(Request $request){
  $session = $request->getSession();

  $etape = new Etape();
  $formEtape = $this->createForm(newStepType::class, $etape);   
  if ($request->isXmlHttpRequest()) {{
         $em = $this->getDoctrine()->getManager();
         $em->persist($etape);
         $em->flush();

         $this->addFlash('success', 'L\'étape a bien été ajoutée !');
         return new JsonResponse(array('message' => 'Success!'), 200);
       }
  }

}

Answer 1

Your question has nothing to do with AJAX: your form won't work with a normal request either.

You'll have to tell your Form to handle the request:

//add this
$formEtape->handleRequest($request);

$etape = new Etape();
if ($request->isXmlHttpRequest()) {{

When you're facing a problem like this again, try to add debug statements like this:

if ($request->isXmlHttpRequest()) {
    //your script
} else {
    echo 'no XmlHttpRequest made';
}

It will help to understand what your scripting is doing.