title: Form in modal with symfony2 and jquery is not being submitted with data
body: <p>I have a list of Schools displayed in my list.html.twig. For each school I need to insert some data which is filled in a form inside a modal. I need that once the form is filled, the modal is submitted and closes, showing again the background page. Normally the submit action of the modal causes page refresh, and I want to avoid that obviously.</p>
  
  <p>The inspiration for the code was <a href="http://codepen.io/stefita/blog/dynamically-add-options-to-entity-form-field-in-simfony2" rel="nofollow">this tutorial</a>, specifically I followed the creation of the form...</p>
  
  <pre><code>    //school controller 
      $school = new School();
      $form = $this-&gt;createForm(
          new SchoolFormType($param),
          $school,
          array(
              'action' =&gt; $this-&gt;generateUrl("school_modal_vp", array(
                  'param' =&gt; $param,
              )),
              'method' =&gt; 'POST'
      ));
  
      if($request-&gt;isMethod('POST')) {
          $form-&gt;handleRequest($request);
          if($form-&gt;isValid()) {
              $data = $form-&gt;getData();
              $em-&gt;persist($data);
              $em-&gt;flush();
              $response = new Response(json_encode([
                  'success' =&gt; true,
              ]));
              $response-&gt;headers-&gt;set('Content-Type', 'application/json');
  
              return $response;
          }
      }
  </code></pre>
  
  <p>... and the function which "replaces" the submit action of the modal with a AJAX call with form data, storing it to database and closing modal.</p>
  
  <pre><code>&lt;script&gt;
  var param_id = '{{ param.id }}';
  
  function sendForm(form, callback) {
      // Get all form values
      var values = {};
      $.each( form[0].elements, function(i, field) {
          if (field.type != 'checkbox' || (field.type == 'checkbox' &amp;&amp; field.checked)) {
              values[field.name] = field.value;
          }
      });
      // Post form
  
      console.log(values);
      $.ajax({
          type        : form.attr( 'method' ),
          url         : form.attr( 'action' ),
          data        : values,
          success     : function(result) { callback( result ); }
      });
  }
  
  $(function() {
      $("#school_"+param_id+"_save").on("click", function( e ) {
          e.preventDefault();
          sendForm($("#myModalSchool_" + param_id).find('form'), function (response) {
              $("#myModalSchool_" + param_id).modal('hide');
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>However, this works only for the last modal created while listing the schools. Any help is appreciated, and please if you need ask for details.</p>
  
  <p>EDIT 1:</p>
  
  <p>This is the template as requested</p>
  
  <pre><code>&lt;div class="modal fade" data-backdrop="static" id="myModalSchool_{{ param.id }}"&gt;
  &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
              &lt;h3 class="modal-title"&gt;
                  School
              &lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form id="school_{{ param.id }}" name="school_{{ param.id }}" method="post" action="{{ path('school_modal_vp', {param_id: param.id, }) }}" class="form-horizontal"&gt;
                  {{ form_errors(form) }}
                  {{ form_rest(form) }}
                  {{ form_end(form) }}
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>