提交表格ajax symfony

Question

I want to save an entity using ajax and symfony. but always I get an error. this is my code

<form id="form"  class="full_form" {{form_enctype(form)}} action="{{ path('add_contact') }}" method="post" >
<div class="left small_width">

    <div class="section-title">Ajout d'un contact</div>
    <span>Les champs suivis d’une étoile sont obligatoires</span>
    {{ form_widget(form.name,{ 'attr': {'maxlength': '50','placeholder':'placeholder.nom'|trans} }) }}
    {{ form_widget(form.lastName, { 'attr': {'maxlength': '50','placeholder':'placeholder.prenom'|trans} }) }}
    {{ form_widget(form.countryId,{ 'attr': {'maxlength': '50','placeholder':'placeholder.contact.country'|trans} }) }}
    {{ form_widget(form.gsmPrimary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.gsmPrimary'|trans} }) }}
    {{ form_widget(form.gsmSecondary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.gsmSecondary'|trans} }) }}
    {{ form_widget(form.landlinePrimary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.landlinePrimary'|trans} }) }}
    {{ form_widget(form.landlineSecondary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.landlineSecondary'|trans} }) }}
    {{ form_widget(form.faxPrimary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.faxPrimary'|trans} }) }}
    {{ form_widget(form.faxSecondary, { 'attr': {'maxlength': '50','placeholder':'placeholder.contact.faxSecondary'|trans} }) }}
    {{ form_widget(form.streetNumber) }}

in my java script code:

<script>
    initAjaxForm();
</script>

in my main.js

     function initAjaxForm()
    {
        $('body').on('submit','full_form',function(e) {


 e.preventDefault();

        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize()
        })
            .done(function (data) {
                if (typeof data.message !== 'undefined') {
                    alert(data.message);
                }
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                if (typeof jqXHR.responseJSON !== 'undefined') {
                    if (jqXHR.responseJSON.hasOwnProperty('form')) {
                        $('#form_body').html(jqXHR.responseJSON.form);
                    }

                    $('.form_error').html(jqXHR.responseJSON.message);

                } else {
                    alert(errorThrown);
                }

            });

    });
}

and finally in my controller. the create action is shown as follow.

    public function createAction(Request $request)
    {

 if (!$request->isXmlHttpRequest()) {
    return new JsonResponse(array('message' => 'You can access this only using Ajax!'), 400);
}
        $contact = new Contact();
        $form = $this->createForm(new ContactType(), $contact);


        $form->handleRequest($request);

         if ($form->isValid()) {
            $em = $this->getDoctrine()->getManager();
               $em->persist($contact);
           // $em->persist($label);
            $em->flush();
             return new JsonResponse(array('message' => 'Success!'), 200);

        }
  $response = new JsonResponse(
            array(
                'message' => 'Error',
                'form' => $this->renderView('MyBundle:Contact:new.html.twig',
                    array(
                        'entity' => $contact,
                        'form' => $form->createView(),
                        'form2' => $form2->createView()
                    ))), 400);

        return $response;

but always I get an error, "You can access this only with ajax".

Have any one an example showing us how we can send a form using ajax. I tried two example found in the net but always the same result.

Answer 1

you can use ajaxSubmit to submit your form like this:

$('input[type="submit"]').click(function () {
    $('#form').submit(function(e){
        e.preventDefault();
        $(this).ajaxSubmit(
        {
            url: "{{ path('add_contact') }}",
            type: "POST",
            success: function (result)
            {
               $('#form_body').html(result);
            }
        });
    });
});

or you can also submit your form like this:

$('input[type="submit"]').click(function () {
        $('#form').submit(function(e){
            e.preventDefault();
            $.ajax(
            {
                url: "{{ path('add_contact') }}",
                type: "POST",
                data: $('#form').serialize(),
                success: function (result)
                {
                   $('#form_body').html(result);
                }
            });
        });
    });

Hope that helps