title: PHP symfony 4 ajax form submission
body: <p>I'm trying to submit a form using ajax and send it's data to the database, but I don't understand how to proces the data received from the ajax call.</p>
  
  <p>I wrote the following code:</p>
  
  <pre><code>{% extends 'base.html.twig' %}
  
  {% block title %}Assignments | CRM Fabriek{% endblock %}
  
  {% block body %}
  
      &lt;div class="container"&gt;
          &lt;div class="columns"&gt;
              &lt;div class="column is-full"&gt;
                  &lt;div class="level"&gt;
                      &lt;h1 class="level-left title title-no-margin is-vcentered"&gt;Assignments&lt;/h1&gt;
  
                      &lt;div class="level-right"&gt;
                          {% include 'search.html.twig' %}
  
                          &lt;a href="{{ path("newAssignment") }}" class="level-item button is-success"&gt;Add new&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;table class="table is-fullwidth"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Description&lt;/th&gt;
                          &lt;th&gt;Status&lt;/th&gt;
                          &lt;th&gt;Actions&lt;/th&gt;
                      &lt;/tr&gt;
                      {% if assignments != null %}
                          {% for assignment in assignments %}
                              &lt;tr&gt;
                                  &lt;td&gt;{{ assignment.name }}&lt;/td&gt;
                                  &lt;td&gt;{{ assignment.description }}&lt;/td&gt;
                                  &lt;td&gt;{{ assignment.status }}&lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;a class="button is-info is-small" href="{{ path('overviewAssignment', {'id': assignment.id}) }}"&gt;&lt;i class="fa fa-eye"&gt;&lt;/i&gt;&lt;/a&gt;
                                      &lt;a class="button is-warning is-small" href="{{ path('editAssignment', {'id': assignment.id}) }}"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/a&gt;
                                      &lt;button class="button is-success is-small" onclick="openModal({{ assignment.id }})"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          {% endfor %}
                      {% else %}
                          &lt;tr&gt;
                              &lt;td colspan="4"&gt;No entries&lt;/td&gt;
                          &lt;/tr&gt;
                      {% endif %}
                  &lt;/table&gt;
                  &lt;div class="pagerfanta"&gt;
                      {{ pagerfanta(pager)}}
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div class="modal"&gt;
                          &lt;div class="modal-background"&gt;&lt;/div&gt;
                          &lt;div class="modal-card"&gt;
                              &lt;header class="modal-card-head"&gt;
                                  &lt;p class="modal-card-title"&gt;Modal title&lt;/p&gt;
                              &lt;/header&gt;
                              &lt;section class="modal-card-body"&gt;
                                  {{ form_start(form, {'attr': {'id': 'task_form'}}) }}
                                  {{ form_row(form.name, {'attr': {'class': 'input'}}) }}
                                  {{ form_row(form.description, {'attr': {'class': 'textarea'}}) }}
  
                                  {{ form_label(form.status) }}
                                  &lt;div class="control"&gt;
                                      &lt;div class="select"&gt;
                                          {{ form_widget(form.status) }}
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  {{ form_end(form) }}
                              &lt;/section&gt;
                              &lt;footer class="modal-card-foot"&gt;
                                  &lt;button id="submit_task" class="button is-success"&gt;Save changes&lt;/button&gt;
                                  &lt;button class="button" onclick="closeModal()"&gt;Cancel&lt;/button&gt;
                              &lt;/footer&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  {% endblock %}
  
  {% block javascripts %}
      &lt;script&gt;
          function openModal(id){
              $('.modal').addClass('is-active');
              $('#submit_task').attr('onClick', 'submitTask('+ id +');');
          }
  
          function closeModal(){
              $('.modal').removeClass('is-active');
  
          }
          function submitTask(id){
              console.log(id);
  
              form = $('#task_form').serialize();
  
              console.log(form); 
              $.ajax({
                  url:'{{ path('submit_task') }}',
                  type: "POST",
                  dataType: "json",
                  data: {
                      "task": form
                  },
                  async: true,
                  success: function (return_data)
                  {
                      console.log(return_data);
                  },
                  error: function (xhr, ajaxOptions, thrownError)
                  {
  
                  }
              });
              closeModal();
          }
      &lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>With the following method in the controller:</p>
  
  <pre><code>/**
       * @Route("/", name="submit_task")
       */
      public function add_task(Request $request){
          $form_data = $request-&gt;get('task');
  
          return new JsonResponse($form_data);
      }
  </code></pre>
  
  <p>The form is created in the index action: </p>
  
  <pre><code>/**
       * @Security("is_authenticated()")
       * @Route("/assignments", name="assignments")
       */
      public function index(Request $request)
      {
  
          $assignment_rep = $this-&gt;getDoctrine()-&gt;getRepository(Assignment::class);
  
          if($request-&gt;get('search') == null) {
              if($this-&gt;get('security.authorization_checker')-&gt;isGranted('ROLE_ADMIN')){
                  $assignments = $assignment_rep-&gt;findAll();
              }
              else
              {
                  /* @var User $user */
                  $user = $this-&gt;getUser();
                  $assignments = array();
                  foreach($user-&gt;getAssignments() as $assignment){
                      array_push($assignments, $assignment);
                  }
              }
          }
          else{
  
              if($this-&gt;get('security.authorization_checker')-&gt;isGranted('ROLE_ADMIN')){
                  $assignments = $assignment_rep-&gt;search($request-&gt;get('search'));
              }
              else
              {
                  /* @var User $user */
                  $assignments = $assignment_rep-&gt;searchUser($request-&gt;get('search'), $this-&gt;getUser()-&gt;getId());
              }
          }
  
          $page = $request-&gt;query-&gt;get('page', 1);
  
          $adapter = new ArrayAdapter($assignments);
  
          $pagerfanta = new Pagerfanta($adapter);
          $pagerfanta-&gt;setMaxPerPage(25);
          $pagerfanta-&gt;setCurrentPage($page);
  
  
          $task = new Task();
          $form = $this-&gt;createForm(TaskFormType::class, $task);
          $form-&gt;remove('assignment');
  
          $assignments = $pagerfanta-&gt;getCurrentPageResults();
  
          return $this-&gt;render('assignment/index.html.twig', array(
              'assignments' =&gt; $assignments,
              'pager' =&gt; $pagerfanta,
              'form' =&gt; $form-&gt;createView()
          ));
      }
  </code></pre>
  
  <p>I would like to know how to process the form data without the "form" object in the function. Could anyone help me out with this problem!</p>