Submiting two forms with Ajax in Symfony 4.3

I am having trouble submitting two forms.
I have two form types:

class ApplicationErrorType extends AbstractErrorType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('email', TextType::class, [
                'label' => 'Notification email*',
                'required' => true
            ])
            ->add('problemName', TextType::class, [
                'label' => 'The name of the problem*',
                'required' => true
            ])
            ->add('applicationName', TextType::class, [
                'label' => 'Application name*',
                'required' => true
            ])
            ->add('deviceType', TextType::class, [
                'label' => 'Device type*',
                'required' => true
            ])
            ->add('systemType', TextType::class, [
                'label' => 'System type*',
                'required' => true
            ])
            ->add('errorDescription', TextType::class, [
                'label' => 'Error description*',
                'required' => true
            ])
            ->add('_type', HiddenType::class, array(
                'data'   => 'ticket_application_error',
                'mapped' => false
            ))
        ;

        parent::buildForm($builder, $options);
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'csrf_protection' => true,
            'data_class' => ApplicationError::class,
            'method' => 'POST'
        ]);
    }

    public function getBlockPrefix()
    {
        return 'ticket_application_error';
    }
}

class CategoryType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('category', ChoiceType::class, [
                'label' => 'Category',
                'choices' => array_flip(AppUtilCategoryType::$map)
            ])
        ;
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'csrf_protection' => true,
            'data_class' => AppUtilCategoryType::class
        ]);
    }
}

I need to submit CategoryType form which is select. Guest pick category form that select and second form ApplicationErrorType should be appeare.

I have got a controller:

class MainController extends AbstractController
{
    /**
     * @Route("/", name="frontend_homepage")
     * @return Response
     */
    public function view()
    {
        return $this->render('frontend/main/view.html.twig', [
            'formCategory' => ($this->createForm(CategoryType::class))->createView(),
            'formTicket' => ($this->createForm(ApplicationErrorType::class)->createView()),
        ]);
    }

    /**
     * @param Request $request
     * @Route("/ticket", name="frontend_data_complete", methods={"POST"})
     * @return JsonResponse
     */
    public function complete(Request $request){
        if ($request->isXmlHttpRequest()) {
            $form = $this->createForm(ApplicationErrorType::class);
            $form->handleRequest($request);
            if ($form->isSubmitted()) {
                if ($form->isValid()) {
                    return $this->json([], 200);
                } else {
                    return $this->json(['errors' => $this->processInvalidForm($form)], 412);
                }
            }
        }
        return $this->json([], 400);
    }

    /**
     * @param FormInterface $form
     * @return array
     */
    private function processInvalidForm(FormInterface $form)
    {
        $errors = [];
        foreach ($form->getErrors(true) as $error) {
            $errors[] = [
                'fieldName' => $error->getOrigin()->getName(),
                'errorMessage' => $error->getMessage()
            ];
        }
        return $errors;
    }

And Twig template:

{% block body %}
    <a class="link-button" href="{{ path('fos_user_security_login') }}">Login</a>
    <div class="col-12">
        <h3 class="title" >Welcome to the ServiceDesk!</h3>
        <h4 class="title" >We are here to help you improve your problem</h4>
    </div>
    <div class="form1">
        {{ form(formCategory) }}
    </div>

    <div class="form1" style="display: none">
        {{ form(formTicket) }}
    </div>
{% endblock %}

{% block javascripts %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        jQuery = $;
    </script>
    <script>
        $(document).ready(function () {
            $('.form1').on('change', function () {
                $('.form2').css('display', 'block')
            })
        })
    </script>
{% endblock %}

How can i submit Category form and show Application form ? I pretty new in symfony and js, i just learning and i can not resolve that..

Thanks for your time !

Source: Symfony Questions

Was this helpful?

YesNo

0 / 0

#ajax #forms #select #submit #symfony