Q:

SYMFONY 4 - How can the user be redirected to the next part of the same form? ( On another page)

Good morning, everyone, 
As a beginner in Symfony 4, you will risk seeing me regularly ask basic but essential questions for my understanding of this language.  
Today I have a rather embarrassing problem.... I would like to make sure that as soon as the person has clicked on "Next", they are redirected to another page in order to continue the questionnaire.  
Could you please explain to me how to change the page person after clicking on the next button and make sure the checks are correct.  
This is what I thought of: 
 -> Put all my form in SimulationController.php and display what I want with my Javascript.  
-> Create another page in order to navigate to it and display the rest of my form.  
Thank you for your understanding.  
Here are the files: 
SimulationController.php
<? php
// src/Controller/SimulationController.php

namespace App\Controller;

use App\Model\Client;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\Extension\Core\Type\IntegerType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Twig\Environment;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;

class SimulationController extends AbstractController
{

    /**
     * @Route("/simulation", name="simulation")
     * @param Environment $twig
     * @param Request $request
     * @return Response
     */
  public function situation(Environment $twig, Request $request): Response
  {

      $Client = new Client();
      $simulateur = $this->createFormBuilder($Client)

          /* Situation */
          ->add("famille", ChoiceType::class, [
              'label' => 'Votre situation familliale ?', 
              'choices' => [
                  'Célibataire' => 'celibataire',
                  'Marié(e)' => 'marie',
                  'Pacsé(e)' => 'pacse',
                  'En concubinage' => 'concubinage',
                  'Divorcé(e)' => 'divorce',
                  'Veuf/Veuve' => 'veuf'
              ],
              'attr' => [
                  'class' => 'situation_familliale input']
          ])
          ->add('anneeDeNaissance', IntegerType::class, [
              'label' => 'Quelle est votre année de naissance ?', 
              'required' => True,
              'attr' => [
                  'class' => 'naissance input',
                  'placeholder' => 'Ex : 1950']
          ])
          ->add('enfant', ChoiceType::class, [
              'label' => 'Avez vous des enfants ?', 
              'choices' => array(
                  'Non' => False,
                  'Oui' => True,
              ),
              'attr' => [
                  'class' => 'enfant']
          ])
          ->add('enfant_nombre', IntegerType::class, [
              'label' => 'Combien avez-vous d\'enfants ?', 
              'required' => True,
              'attr' => [
                  'class' => 'enfant_nombre input',
                  'placeholder' => 'Ex : 3']])
          ->add('enfant_foyer', IntegerType::class, [
              'label' => 'Combien sont encore dans votre foyer fiscal ?', 
              'required' => True,
              'attr' => [
                  'class' => 'enfant_foyer input',
                  'placeholder' => 'Ex : 3']])
          ->add('pension', ChoiceType::class, [
              'label' => 'Payez vous une pension ?', 
              'choices' => array(
                  'Non' => False,
                  'Oui' => True,
              ),
              'attr' => [
                  'class' => 'pension']
          ])
          ->add('pension_tarif', IntegerType::class, [
              'label' => 'Combien vous coûte cette pension mensuellement?', 
              'required' => True,
              'attr' => [
                  'class' => 'pension_tarif input',
                  'placeholder' => 'Ex : 450€']])

          /* Patrimoine */
          ->add('submit', SubmitType::class,[
              'label' => "Suivant",
              'attr' => [
                  "class" => "envoyer show",
                  "onClick" => "pageSuivante()",
              ]
          ])

          ->getForm();

      /* Récupération des données afin de les garder en mémoire */

      $simulateur->handleRequest($request);
      $simulateur->getData();
      dump($Client);
      return $this->render('/content/simulation.html.twig', [
          'SituationForm'=>$simulateur->createView()
      ]);

  }
}

Client.php
<? php

namespace App\Model;

use Symfony\Component\Validator\Constraints as Assert;

class Client{

    public $famille;

    /**
     * @Assert\NotBlank
     * @Assert\Range(
     *      min = 1900,
     *      max = 2019,
     *      minMessage = "Merci de rentrer une valeur correcte. ", 
     *      maxMessage = "Merci de rentrer une valeur correcte." 
     * )
     *

     */
    public $anneeDeNaissance;

    public $enfant;

    /**
     * @Assert\NotBlank
     * @Assert\Range(
     *      min = 0,
     *      max = 200,
     *      minMessage = "Merci de rentrer une valeur correcte. ", 
     *      maxMessage = "Merci de rentrer une valeur correcte." 
     * )
     *
     */
    public $enfant_nombre;

    /**
     * @Assert\NotBlank
     * @Assert\Range(
     *      min = 0,
     *      max = 200,
     *      minMessage = "Merci de rentrer une valeur correcte. ", 
     *      maxMessage = "Merci de rentrer une valeur correcte." 
     * )
     *
     */
    public $enfant_foyer;

    public $pension;

    /**
     * @Assert\NotBlank
     * @Assert\Range(
     *      min = 0,
     *      max = 9999999999,
     *      minMessage = "Merci de rentrer une valeur correcte.", 
     *      maxMessage = "Merci de rentrer une valeur correcte." 
     * )
     *
     */
    public $pension_tarif;
}

simulation.html.twig
{% extends "home.html.twig" %}

{% block title %}  Simulimmo - Simulateur{% endblock %}
{% block stylesheet_content %}<link rel="stylesheet" href="css/simulateur.css"> {% endblock %}

{% block contact %}  {% endblock %}
{% block nous %}  {% endblock %}
{% block simulation %}  {% endblock %}

 {% block naviguation %}

     <div class="container-naviguation">
         <div class="content-naviguation">
             <div class="colonne-naviguation">
                 <div class="numero-naviguation situation_naviguation active"><p>1</p></div>
                 <div class="texte-naviguation"> <strong> SITUATION </strong> </div>
             </div>

             <div class="colonne-naviguation separation-naviguation patrimoine_separation"></div>

             <div class="colonne-naviguation">
                 <div class="numero-naviguation patrimoine_naviguation"><p>2</p></div>
                 <div class="texte-naviguation"><strong> PATRIMOINE </strong> </div>
             </div>

             <div class="colonne-naviguation separation-naviguation epargne_separation"></div>

             <div class="colonne-naviguation">
                 <div class="numero-naviguation epargne_naviguation"><p>3</p></div>
                 <div class="texte-naviguation"> <strong>ÉPARGNE</strong> </div>
             </div>

             <div class="colonne-naviguation separation-naviguation objectifs_separation"></div>

             <div class="colonne-naviguation">
                 <div class="numero-naviguation objectifs_naviguation"><p>4</p></div>
                 <div class="texte-naviguation"> <strong>OBJECTIFS</strong> </div>
             </div>

             <div class="colonne-naviguation separation-naviguation resultats_separation"></div>

             <div class="colonne-naviguation">
                 <div class="numero-naviguation resultats_naviguation"><p>5</p></div>
                 <div class="texte-naviguation"> <strong>RÉSULTATS</strong></div>
             </div>
         </div>
     </div>
 {% endblock %}

{% block body %}

    <!-- 

    Partie questionnaire

    -->
    <div class="container-questionnaire">
        <div class="content-questionnaire">
            <div class="section">
                <div class="situation section show">
                    <h1> SITUATION </h1>
                    {{ form_start(SituationForm) }}
                        {{ form_row(SituationForm.famille) }}
                        {{ form_row(SituationForm.anneeDeNaissance)}}
                        {{ form_row(SituationForm.enfant)}}
                        {{ form_row(SituationForm.enfant_nombre) }}
                        {{ form_row(SituationForm.enfant_foyer) }}
                        {{ form_row(SituationForm.pension) }}
                        {{ form_row(SituationForm.pension_tarif) }}
                    {{ form_end(SituationForm) }}
                </div>

                <!--  Section 2 | patrimoine -->
                <div class="patrimoine section hidden">
                    <h1>PATRIMOINE </h1>
                    {% block patrimoine %} {% endblock %}
                </div>

                <!--  Section 3 | epargne -->
                <div class="epargne section hidden">
                    <h1>ÉPARGNE </h1>
                    {% block epargne %} {% endblock %}
                </div>

                <!--  Section 4 | objectifs -->
                <div class="objectifs section hidden">
                    <h1>OBJECTIFS </h1>
                    {% block objectifs %} {% endblock %}
                </div>

                <!--  Section 5 | resultats -->
                <div class="resultats section hidden">
                    <h1>RÉSULTATS </h1>
                    {% block resultats %} {% endblock %}
                </div>

                <div class="button">
                    <a><button onClick="pagePrecedente()" class="precedent hidden">Précédent</button></a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
 /*
        function changerElement(section){
            hidden = document.getElementsByClassName(section);
            show = document.getElementsByClassName(section);

        }

        function afficherConsole(section, hidden, show){
            console.log(section);
            console.log(hidden);
            console.log(show);
        }

        function sectionSuivante(section, section_precedente){ //CSS modification

            $("."  + section_precedente).css("display", "none"); // Enleve la partie d'avant
            $("."  + section).css("display", "inherit"); // Affiche la page d'après
        }

        function naviguationSuivante(section){ // CSS modification

            $("."  + section + "_naviguation").addClass("active"); // Changement de la boule (Grâce à ACTIVE)
            $("."  + section + "_separation").addClass("active"); // Changement de la séparation
            $(".precedent").addClass("show").removeClass("hidden"); // Affiche le bouton pour retourner en arrière
        }

        var suivant = 2;
        var situation = "situation";
        var patrimoine = "patrimoine";
        var epargne = "epargne";
        var objectifs = "objectifs";
        var resultats = "resultats";

        /**
         * La fonction suivant() s'occupe d'afficher la nouvelle partie du questionnaire
         */
           /* function pageSuivante(){
            /*Sélection de votre page */
            /*switch(suivant){
                case 1: /* Situation */
                   /* changerElement(situation);
                    sectionSuivante(situation, resultats);
                    naviguationSuivante(situation);
                    afficherConsole(situation);
                    break;
                case 2: /* Patrimoine */
                   /* changerElement(patrimoine);
                    sectionSuivante(patrimoine, situation);
                    naviguationSuivante(patrimoine);
                    afficherConsole(patrimoine);
                    break;
                case 3: /* Epargne */
                 /*   changerElement(epargne);
                    sectionSuivante(epargne, patrimoine);
                    naviguationSuivante(epargne);
                    afficherConsole(epargne);
                    break;
                case 4: /* Objectifs */
                   /* changerElement(objectifs);
                    sectionSuivante(objectifs, epargne);
                    naviguationSuivante(objectifs);
                    afficherConsole(objectifs);
                    break;
                case 5: /* Résultat */
                    /*changerElement(resultats);
                    sectionSuivante(objectifs, resultats);
                    naviguationSuivante(resultats);
                    afficherConsole(resultats);
                    break;
                default:
                    suivant = 0;
                    break;
            }

            suivant += 1;
            return suivant;
        }

        /**
         * La fonction precedent() s'occupe d'afficher la partie précédente du questionnaire
         */
      /* function pagePrecedente(){
            suivant -= 2;
            pageSuivante();
            return suivant;

        }

{% endblock %}

A:

I recommend you to use CraueFormFlowBundle to handle multi-steps form flows in an easy way. 
It has very nice features and the setup is a piece of cake.  
They provide some form flow examples here, where you can access the examples source codes too.