0

Reading this Symfony CSRF and Ajax it just returns the csrf, but how should be the jQuery to return it to form?

EDIT: My code is below:

$formFactory = Forms::createFormFactoryBuilder()
    ->addExtension(new CsrfExtension($csrfManager))
    ->getFormFactory();


$defaultFormTheme = 'bootstrap_3_layout.html.twig';

$vendorDir = realpath(__DIR__.'/../vendor');
$appVariableReflection = new \ReflectionClass('\Symfony\Bridge\Twig\AppVariable');
$vendorTwigBridgeDir = dirname($appVariableReflection->getFileName());
$viewsDir = realpath('twig');

$twig = new Twig_Environment(new Twig_Loader_Filesystem(array(
    $viewsDir,
    $vendorTwigBridgeDir.'/Resources/views/Form',
)));
$formEngine = new TwigRendererEngine(array($defaultFormTheme), $twig);
$twig->addRuntimeLoader(new \Twig_FactoryRuntimeLoader(array(
    TwigRenderer::class => function () use ($formEngine, $csrfManager) {
        return new TwigRenderer($formEngine, $csrfManager);
    },
)));
$twig->addExtension(new FormExtension());

$translator = new Translator('en');
$twig->addExtension(new TranslationExtension($translator));
$form = $formFactory->createBuilder()
    ->add('task', TextType::class)
    ->add('dueDate', DateType::class)
    ->getForm();

$request = Request::createFromGlobals();
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
    $data = $form->getData();
    print_r($data);
}

$twig->display('new.html.twig', array(
    'form' => $form->createView(),
));

Then in my form template I have:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$.ajax({
    url: "app.php",
    type: 'POST',
    data: {
        form: {
            _token: "{{ csrf_token('form') }}"
        }
    },
});
</script>
</head>
<body>

{{ form_start(form, {'method': 'POST', 'action': 'app.php'}) }}
{{ form_row(form.task, {'required': false}) }}
    <input type="submit" />
{{ form_end(form, {'render_rest': false}) }}

When I look at my source code I see:

<script>
$.ajax({
    url: "app.php",
    type: 'POST',
    data: {
        form: {
            _token: "Kf1IK4uikxPCxfmjUkDa8vhRiNI4PWS2zdnTIiWyHC4"
        }
    },
});
</script>
<form name="form" method="post" action="app.php">
<div class="form-group"><label class="control-label" for="form_task">Task</label><input type="text" id="form_task" name="form[task]" class="form-control" value="qqq" /></div>


    <input type="submit" />
</form>

So token is generated but when I do print debug, I don't see _token is posted. What wrong I did?

Joe Hark
  • 155
  • 1
  • 3
  • 10

1 Answers1

0

You can serialize the form as describe in one of the answer of your link, or only send the token

Token only: 

$.ajax({
    url: "{{ path('your_edit_route') }}",
    type: 'POST',
    data: {
        form: {
            _token: "{{ csrf_token('form') }}"
        }
    },
});

Whole form:

var data = $('#targetForm').serialize();

$.ajax({
    url: "{{ path('your_edit_route') }}",
    type: 'POST',
    data: data,
});
goto
  • 7,908
  • 10
  • 48
  • 58