php - SYMFONY 4 - 如何将用户重定向到同一表单的下一部分? (在另一页)

标签 php html css symfony twig

大家早上好

作为 Symfony 4 的初学者,您可能会看到我经常问基本但必不可少的问题,以了解我对这门语言的理解。

今天我有一个相当尴尬的问题....我想确保一旦这个人点击“下一步”,他们就会被重定向到另一个页面以继续问卷调查。

能否请您向我解释如何在单击下一步按钮后更改页面人员并确保检查正确。

我是这样想的: -> 将我所有的表单放入 SimulationController.php 并使用我的 Javascript 显示我想要的内容。 -> 创建另一个页面以导航到它并显示我的表单的其余部分。

感谢您的理解。

文件如下:

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()
      ]);

  }
}

客户端.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 %}

最佳答案

我推荐你使用CraueFormFlowBundle以简单的方式处理多步骤表单流。

它具有非常好的功能,而且设置非常简单。

他们提供了一些表单流程示例 here ,您也可以在其中访问示例源代码。

关于php - SYMFONY 4 - 如何将用户重定向到同一表单的下一部分? (在另一页),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58414893/

相关文章:

php - DB::select 过程从输入请求返回空数组

javascript - 从 HTML/CSS/JS 应用程序发送电子邮件

javascript - 如何清除内容 - Bootstrap Modal

html - 溢出:隐藏和 % 高度

php - Laravel 验证单选按钮输入

php - 如何获取文件对象 laravel

php - 检查 WooCommerce 购物车页面上是否启用了特定运输方式

jquery - 链接问题: Placing a link inside a clickable element中的链接

javascript - Bootstrap 下拉列表不会在移动设备上展开

javascript - CSS:根据内容扩展 float 元素的宽度