动态变化的形式是 Symfony 5

Question

我正在尝试制作一个根据用户响应进行更改的表单，我有一个 ChoiceType::class 用于第一部分，其中“是”或“否”作为选项。如果用户选择“是”，我希望显示表单的第二部分以得到他们的回复，但如果他们选择“否”，我只想隐藏第二个表单。

这是我目前的表格

public function buildForm(FormBuilderInterface $builder, array $options)
{
  ->add('attending', ChoiceType::class, [
     'choices' => [
       'yes' => true,
       'no' => false,
     ],
     'attr' => [
        'class' => 'attendanceStatus'
     ],
     'mapped' => false,
     'required' => true,
     'label' => 'Will you be attending?',
     'placeholder' => 'Please make selection',
  ])
  ->add('bringingGuest', ChoiceType::class, [
     'choices' => [
       'yes' => true,
       'no' => false,
     ],
       
         

我将表单包装在一个类中，并为每个表单指定了一个 ID

    <div class="attendance">
      <div id="attendance-status">
        {{ form_label(form.attending) }}
        {{ form_errors(form.attending) }}
        {{ form_widget(form.attending) }}
      </div>
      <div id="guest" style="display: none;">
        {{ form_label(form.bringingGuest) }}
        {{ form_errors(form.bringingGuest) }}
        {{ form_widget(form.bringingGuest) }}
      </div>
</div>

我不是最擅长 javascript，但我尝试做这样的 if 语句

if ('.attending' == true) {
 document.getElementById('guest').style.display = 'block';
}

我在这方面已经有一段时间了，但我似乎无法弄清楚如何正确地做到这一点。我认为这就像为用户选择设置一个事件侦听器，然后在满足条件时仅使用 javascript 显示第二种形式。

Answer 1

就像您可能已经知道的那样，这是一个 javascript 问题。就像您说的那样，您可以使用事件侦听器，例如在值更改时运行函数。这是一个例子：

const someId = document.getElementById('some-id');
const example = document.getElementById('example');

someId.addEventListener('change', doSomething);

function doSomething() {
  if (someId.value === "yes") {
    example.innerHTML = "YES!"
  } else {
    example.innerHTML = ""
  }
}

<select name="name" id="some-id">
  <option value="no">no</option>
  <option value="yes">yes</option>
</select>

<div id="example">
</div>

您需要做的就是检查您应该定位哪些 ID 以及您希望在哪个事件上发生什么。要了解有关活动的更多信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/Events。

Answer 2

您可能需要查看 Symfony 文档中的 How to Dynamically Modify Forms Using Form Events 页面。 在您的情况下，它将是 Dynamic Generation for Submitted Forms 部分。

它涉及 2 种类型的事件 - PHP/Symfony 端的表单事件和 JS 主要是“被动”角色来监听元素更改并替换 HTML。

接下来的想法是：

• 当用户对 HTML 元素执行操作时，向后端发送请求，并根据元素的更改值呈现页面的新状态。在这里，您将获得整页 HTML 作为响应。
• 然后，只需将页面的相关块替换为您从响应中获得的新呈现的 HTML 片段。

以下是主要部分（从文档复制粘贴）：

// src/Form/Type/SportMeetupType.php
namespace App\Form\Type;

use App\Entity\Position;
use App\Entity\Sport;
use Symfony\Bridge\Doctrine\Form\Type\EntityType;
use Symfony\Component\Form\FormInterface;
// ...

class SportMeetupType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('sport', EntityType::class, [
                'class' => Sport::class,
                'placeholder' => '',
            ])
        ;

        $formModifier = function (FormInterface $form, Sport $sport = null) {
            $positions = null === $sport ? [] : $sport->getAvailablePositions();

            $form->add('position', EntityType::class, [
                'class' => Position::class,
                'placeholder' => '',
                'choices' => $positions,
            ]);
        };

        $builder->addEventListener(
            FormEvents::PRE_SET_DATA,
            function (FormEvent $event) use ($formModifier) {
                // this would be your entity, i.e. SportMeetup
                $data = $event->getData();

                $formModifier($event->getForm(), $data->getSport());
            }
        );

        $builder->get('sport')->addEventListener(
            FormEvents::POST_SUBMIT,
            function (FormEvent $event) use ($formModifier) {
                // It's important here to fetch $event->getForm()->getData(), as
                // $event->getData() will get you the client data (that is, the ID)
                $sport = $event->getForm()->getData();

                // since we've added the listener to the child, we'll have to pass on
                // the parent to the callback functions!
                $formModifier($event->getForm()->getParent(), $sport);
            }
        );
    }

    // ...
}

在 JS 中：

{# templates/meetup/create.html.twig #}
{{ form_start(form) }}
    {{ form_row(form.sport) }}    {# <select id="meetup_sport" ... #}
    {{ form_row(form.position) }} {# <select id="meetup_position" ... #}
    {# ... #}
{{ form_end(form) }}

<script>
var $sport = $('#meetup_sport');
// When sport gets selected ...
$sport.change(function() {
  // ... retrieve the corresponding form.
  var $form = $(this).closest('form');
  // Simulate form data, but only include the selected sport value.
  var data = {};
  data[$sport.attr('name')] = $sport.val();
  // Submit data via AJAX to the form's action path.
  $.ajax({
    url : $form.attr('action'),
    type: $form.attr('method'),
    data : data,
    success: function(html) {
      // Replace current position field ...
      $('#meetup_position').replaceWith(
        // ... with the returned one from the AJAX response.
        $(html).find('#meetup_position')
      );
      // Position field now displays the appropriate positions.
    }
  });
});
</script>