Переменная Twig не существует во время отправки внутри функции успеха ajax

Question

У меня есть форма, отправляемая в ajax в POST, я проверяю, является ли форма действительной в моем контроллере, и если она действительна, тогда я заменяю эту форму другой формой в моем userForm div благодаря функции успеха ajax.Когда я проверяю код HTML, первая форма заменяется второй формой, и она имеет значения переменных Twig в «значении» каждого ввода.Пока все в порядке.

Затем я хочу автоматически отправить вторую форму в jquery, но у меня есть ошибка 500 на вкладке Сеть:

Переменная "nom" не существует.

Я не понимаю, почему я получаю эту ошибку, когда содержимое моей переменной отображается, когда я проверяю код HTML ..

Я пытался определить «значение»каждого ввода в JS, а не в переменных Twig, но это тоже не работает, хотя у меня нет ошибки 500.

Мой основной вид:

<img src="{{ asset('loader/loader.gif', 'image_site') }}" alt="Loader" id="spinner" class="mt-30">

    <div id="userForm">
        {{ form_start(form, {'attr': {'class': 'contact-form user-form'}}) }}

        {{ form_errors(form) }}

        {{ form_widget(form.nom) }}
        {{ form_errors(form.nom) }}

        {{ form_widget(form.prenom) }}
        {{ form_errors(form.prenom) }}

        {{ form_widget(form.pays) }}
        {{ form_errors(form.pays) }}

        {{ form_widget(form.tel) }}
        {{ form_errors(form.tel) }}

        {{ form_widget(form.email) }}
        {{ form_errors(form.email) }}

        {{ form_widget(form.submit) }}

        {{ form_end(form) }}
</div>

<script>
        $(function () {
            let registerForm = "{{ path('site_devenir_vip_ajax_payment_form') }}";

            $("#spinner")
                .hide();

            $(document)
                .on("submit", "form", function (e) {
                    e.preventDefault();

                    $.ajax({
                        url: registerForm,
                        type: "POST",
                        dataType: "json",
                        data: $(this)
                            .serialize(),
                        beforeSend: function () {
                            $("#spinner")
                                .show();
                        },
                        success: function (data) {
                            console.log(data);
                            if (data.code === "ok") {
                                $("#userForm").html(data.response);
                                $("#paymentForm")
                                    .submit();
                            } else {
                                console.log(data);
                            }
                        },
                        complete: function () {
                            $("#spinner")
                                .hide();
                        },
                        error: function (jqXHR, status, error) {

                        },
                    });
                });
        });
    </script>

Контроллер:

/**
     * @Route("/{id<\d+>?1}/{slug}", methods={"GET", "POST"}, name="show")
     * @Security("is_granted('IS_AUTHENTICATED_ANONYMOUSLY')")
     */
    public function show(Request $request, Offre $offre, $slug): Response
    {
        if ($offre->getSlug() !== $slug) {
            return $this->redirectToRoute('site_devenir_vip_show', [
                'id'   => $offre->getId(),
                'slug' => $offre->getSlug(),
            ], Response::HTTP_MOVED_PERMANENTLY);
        }

        $utilisateur = new User();

        $form = $this->createForm(UserType::class, $utilisateur);
        $form->handleRequest($request);

        $session = new Session(new NativeSessionStorage(), new AttributeBag());
        $session->set('offre', $offre->getId());

        return $this->render('site/pages/devenir_vip/show.html.twig', [
            'form'  => $form->createView(),
            'offre' => $offre,
        ]);
    }

    /**
     * @Route("/load-payment-form", condition="request.isXmlHttpRequest()", name="ajax_payment_form", methods={"GET", "POST"})
     */
    public function paymentForm(Request $request): Response
    {
        $utilisateur = new User();

        $form = $this->createForm(UserType::class, $utilisateur);
        $form->handleRequest($request);

        if ($form->isSubmitted() === true) {
            if ($form->isValid() === true) {

                if ($request->getSession() === null) {
                    return new Response('Une erreur s\'est produite pendant la récupération de l\'offre.');
                }

                $offreSession = $request->getSession()->get('offre');
                $offre        = $this->entityManager->getRepository(Offre::class)->find($offreSession);

                $response = [
                    'code'     => 'ok',
                    'response' => $this->render('site/layout/partials/ajax/payment_form.html.twig', [
                        'nom'          => $utilisateur->getNom(),
                        'prenom'       => $utilisateur->getPrenom(),
                        'email'        => $utilisateur->getEmail(),
                        'tel'          => $utilisateur->getTel(),
                        'pays'         => $utilisateur->getPays(),
                        'accountId'    => $this->getParameter('app.payment.account_id'),
                        'abonnementId' => $offre->getAbonnementId(),
                    ])->getContent(),
                ];

                return new JsonResponse($response);
            }

            return new Response('Le formulaire comporte des erreurs.');
        }

        return $this->render('site/layout/partials/ajax/payment_form.html.twig');
    }

payment_form.html.twig:

<form method="post" action="https://mywebsite.com/" id="paymentForm">
    <input type="hidden" name="NOM" value="{{ nom }}">
    <input type="hidden" name="PRENOM" value="{{ prenom }}">
    <input type="hidden" name="EMAIL" value="{{ email }}">
    <input type="hidden" name="TEL" value="{{ tel }}">
    <input type="hidden" name="PAYS" value="{{ pays }}">
    <input type="hidden" name="ID" value="{{ accountId }}">
    <input type="hidden" name="ABONNEMENT" value="{{ abonnementId }}">
</form>

В настоящее время я застрял в этой строке, потому что у меня ошибка 500:

$("#paymentForm").submit();

Answer 1

Я не понимаю, почему вы хотите сделать платежную форму после получения пользовательской формы?В вашем контроллере, когда пользователь зарегистрирован, вы можете зарегистрировать платеж напрямую, не передавая его спереди.

Так что, если вы хотите также передать его спереди, я использую это в JsonResponse:

$response = ['template' => $this->renderView('@your_template', ['form'=>$paymentForm])];
return new JsonResponse($response, JsonResponse::HTTP_OK);

Кроме того, вы можете оплатить первое действие формы (пользователя), передав новый URL:

$form = $this->createForm(UserType::class, $utilisateur, ['action'=> 'your_url', 'method' => 'POST');

И в форме отправки ajax вы можете получить URL-адрес формы без create let registerForm.

Вопрос: пусть для registerForm задано имя маршрута site_devenir_vip_ajax_payment_form, а у вашего действия в контроллере ajax_payment_form у вас есть префикс имени?

Могу ли я вам помочь.