Form in modal form with symfony2 and jquery not presented with data

I have a list of schools displayed on my list. html.twig. For each school, I need to insert some data that is filled in the form inside the modal. I need that after filling out the form, the modal form is presented and closed, displaying the background page again. Usually the submit action of the modal reasons page is updated and I want to explicitly avoid this.

The inspiration for the code was this tutorial , in particular I followed the creation of the form ...

    //school controller 
    $school = new School();
    $form = $this->createForm(
        new SchoolFormType($param),
            'action' => $this->generateUrl("school_modal_vp", array(
                'param' => $param,
            'method' => 'POST'

    if($request->isMethod('POST')) {
        if($form->isValid()) {
            $data = $form->getData();
            $response = new Response(json_encode([
                'success' => true,
            $response->headers->set('Content-Type', 'application/json');

            return $response;


... and a function that "replaces" the action of submitting the modal with an AJAX call with the form data, storing it in the database and closing the modal.

var 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' && field.checked)) {
            values[] = field.value;
    // Post form

        type        : form.attr( 'method' ),
        url         : form.attr( 'action' ),
        data        : values,
        success     : function(result) { callback( result ); }

$(function() {
    $("#school_"+param_id+"_save").on("click", function( e ) {
        sendForm($("#myModalSchool_" + param_id).find('form'), function (response) {
            $("#myModalSchool_" + param_id).modal('hide');


However, this only works for the last modal created when listing schools. Any help is appreciated, and please if you need to know the details.


This is a template on demand

<div class="modal fade" data-backdrop="static" id="myModalSchool_{{ }}">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            <h3 class="modal-title">
        <div class="modal-body">
            <form id="school_{{ }}" name="school_{{ }}" method="post" action="{{ path('school_modal_vp', {param_id:, }) }}" class="form-horizontal">
                {{ form_errors(form) }}
                {{ form_rest(form) }}
                {{ form_end(form) }}



source to share

1 answer

I think the main problem is the var param_id = '{{ }}';

one that is manually defined in your javascript.

First, I advise you to add a class to all of your save buttons (for example modal-submit

) and data-id

on every button.


<button type="button" class="btn btn-primary modal-submit" data-id="{{}}">Submit</button>


Then in your javascript, when you click the save (c modal-submit

) button , you retrieve the id from data-id

and execute sendForm($("#myModalSchool_" + param_id).find('form'),...



$(function() {
    $(".modal-submit").on("click", function( e ) {
        var param_id = $(this).attr('data-id');
        sendForm($("#myModalSchool_" + param_id).find('form'), function (response) {
            $("#myModalSchool_" + param_id).modal('hide');



Saved multiple problem?

Also, I think you have defined the javascript above in each modal. This is why the save is called multiple times. You should only have one instance of this javascript (so it can't be put in your modal view). Try to put javascript in your global location.

Hope it helps



All Articles