form values are not saved in modal

I am quite new in php coding and I am taking back the developpement of a website from another developer who left. I am using symfony 2. My page is a list of meetings on a particular subject. That works fine. I have added the possibility to add an expert for particulat meetings. That works fine as well. What I wanted to add is a modal to be able to add an expert on the subject without changing page. I have then created a AddExpert page which works fine if called alone. When I click on the button, it register correctly the expert in the db and I can then use it. However, when clicking on the button in the modal, the modal disappear but the expert is not created.

Here is my code: Where I have the button to popup the modal with the list of expert:

<td>
        {{ form_widget(meeting.expert, {'attr':{'class': 'form-control'}}) }}
    </td>
    <td>

        <a class="btn btn-info" data-toggle="modal" href="{{  path("appli_addexpert") }}" data-target="#myModal">Open Modal</a>

    </td>

The tag mymodal is the following but it overwritten with my addExpert page:

<!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

Here is my simple addExpert.html.twig page which works fine on his own:

    {% block body %}
    <div class="row">
        <div class="col-md-12">
            <h3>Add a new expert</h3>
            <form method="post">
                {{ form_widget(form_create) }}
                <button id="button-id-modal" type="submit">Add Expert</button>
            </form>
        </div>
    </div>
{% endblock %}

I have read some webpages saying that ajax might be required for it to work. Unfortunately I am not an expert yet so I need some help there. I have tried to add the following javascript part in my block javascript either in the page with all the meetings or in the addExpert/html.twig page but it does not work either:

function postForm($form, callback){
            var values = {};
            console.log($form.serializeArray());
            $.each( $form.serializeArray(), function(i, field) {
                values[field.name] = field.value;
            });

            $.ajax({
                type: 'post',
                url: $form.attr('action'),
                data : values,
                success: callback || function (data) {
                    console.log('Saved!')
                }
            });
        }

        window.postForm = postForm;

Thanks a lot for your help!

EDIT:

In my controller I have the following:

/**
 * @Route("/expert/add")
 * @Template()
 */
public function addExpertAction(Request $request)
{
    $expert      = new Expert();
    $form_create = $this->createForm(new ExpertType, $expert);
    $form_create->handleRequest($request);

    if ($form_create->isValid()) {

        $em = $this->getDoctrine()->getManager();
        $em->persist($expert);
        $em->flush();
        $this->get("session")->getFlashBag()->add(
            "success",
            "Expert " . $expert->getName() . " successfully added !"
        );

       return $this->redirect($this->generateUrl('bdl_appli_manage_expertlist'));
    }

    return array(
        "form_create" => $form_create->createView(),
    );

}

I am guessing the return should be changed then but not sure how as it should only close the modal