使用ajax在Symfony 3中提交多个表单？

Question

I'm trying to create a dynamic 2-step form using Jquery where in "step 1", I want to submit the form data without refreshing my page so that I can hide my html division containing my form and show the other representing my step 2 using Jquery.

The problem is that I'm using a collection of forms in my controller action like this:

public function indexAction(Request $request)
{

$user = $this->getUser();
$em = $this->getDoctrine()->getManager();
$repository = $em->getRepository('ATPlatformBundle:NoteDeFrais');


$form = $this->get('form.factory')->createBuilder(FormType::class)
->add('ndf', CollectionType::class,array(
'entry_type'   => NoteDeFraisType::class,
'label'        => false,
'allow_add'    => true,
'allow_delete' => true,
))
->getForm(); 

And I'm getting the forms data submitted from like this:

if ($request->isMethod('POST') && $form->handleRequest($request)->isValid()
&& isset($_POST['next_button'])) {

$notesDeFrais = $form['ndf']->getData();

foreach ($notesDeFrais as $ndf) {
$ndf->setUser($user);
$em->persist($ndf);
}

$em->flush();

}

elseif (isset($_POST['validate_button'])) {

foreach ($listNdf as $ndf) {
$ndf->setSubmitted(true);
}
$em->flush();
}

So what I wanted to know is how to send my data via an ajax request and how to get them from my action. So far I tried to proceed like this but it (logically) doesn't work.

$("div#bloc_validation").css("display", "none");

$("#next_button").click(function(){

$(".form_ndf").each(function(){

$.post("{{ path('platform_homepage') }}",
{ndf: $(this).serialize()}, //My issue is here
function(){
alert('SUCCESS!');
}
);
});

$("div#form_bloc ").css("display", "none");
$("div#bloc_validation").css("display", "block");
});

Do you have any ideas ? Thanks in advance

Answer 1

The most basic approach is this:

add a javascripts block in your twig file with the content as below. Change appbundle_blog in the first line inside the .ready() function in the name of your form . (Inspect your html to find it).

{% extends 'base.html.twig' %}

{% block body %}
    {{ form_start(edit_form) }}
        {{ form_widget(edit_form) }}
        <input type="submit" value="Save Changes" />
    {{ form_end(edit_form) }}
{% endblock %}

{% block javascripts %}
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
    </script>
    <script>
        $(document).ready( function() {
          var form = $('form[name=appbundle_blog]');

          form.submit( function(e) {
            e.preventDefault();
            $.ajax( {
              type: "POST",
              url: form.attr( 'action' ),
              data: form.serialize(),
              success: function( response ) {
                console.log( response );
              }
            });
          });
        });
    </script>
{% endblock %}

If the form has been submitted you have to answer to an AJAX request. Therefore you could render another template..

/**
 * Displays a form to edit an existing blog entity.
 *
 * @Route("/{id}/edit", name="blog_edit")
 * @Method({"GET", "POST"})
 */
public function editAction(Request $request, Blog $blog)
{
    $editForm = $this->createForm('AppBundle\Form\BlogType', $blog);
    $editForm->handleRequest($request);

    if ($editForm->isSubmitted() && $editForm->isValid()) {
        $this->getDoctrine()->getManager()->flush();

        /* render some new content */
        return $this->render('blog/ajax.html.twig', array(
            'blog' => $blog,
        ));
    }

    return $this->render('blog/edit.html.twig', array(
        'blog' => $blog,
        'edit_form' => $editForm->createView(),
    ));

Or answer in JSON:

use Symfony\Component\HttpFoundation\JsonResponse;

/**
 * Displays a form to edit an existing blog entity.
 *
 * @Route("/{id}/edit", name="blog_edit")
 * @Method({"GET", "POST"})
 */
public function editAction(Request $request, Blog $blog)
{
    $editForm = $this->createForm('AppBundle\Form\BlogType', $blog);
    $editForm->handleRequest($request);

    if ($editForm->isSubmitted() && $editForm->isValid()) {
        $this->getDoctrine()->getManager()->flush();

        return new JsonResponse(array(
            'status' => 'success',
            // ...
        ));
    }

    return $this->render('blog/edit.html.twig', array(
        'blog' => $blog,
        'edit_form' => $editForm->createView(),
    ));
}

If you want you can even test if the request is an AJAX request or not:

if($request->isXmlHttpRequest()) {
    // yes it is AJAX
}