javascript - 按下按钮后添加动态表单字段

Question

我有一个带有简单按钮 $builder->add('language_switcher', ButtonType::class); 的表单，如果按下该按钮，应该简单地添加另一个字段。为此，我使用了 Symfony 的食谱 http://symfony.com/doc/current/form/dynamic_form_modification.html

$builder
    ->get('language_switcher')
    ->addEventListener(
        FormEvents::POST_SUBMIT,
        function () use ($builder, $options) {
            $preparedOptions = $this->prepareOptions($options['data']['productCustomizations']);
            $builder->add('lang_switcher'), ChoiceType::class, $preparedOptions);

        }
    );

现在通过 AJAX 提交时

<script>
    var $button = $('#xyz');

    $button.click(function() {
        var $form = $(this).closest('form');
        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            success: function(html) {
                console.log(html);
                $('#xyz').replaceWith($(html).find('#lang_switcher'));
            }
        });
    });
</script>

我收到错误按钮不支持事件监听器。因此我尝试使用隐藏字段。我将隐藏字段添加到表单中，为其设置 EventListener，并将此 data 添加到我的 AJAX 请求

data[$('#id_of_hidden_​​field').attr('name')] = 1;

但是这没有任何作用。 cockbook 中的示例是在提交选择字段之后，所以我不知道如何使其适应我的需求。我无法使用 SubmitType，因为这样它就会提交表单，对吧？我只想用一个简单的按钮来实现它。

问题是，当我执行 console.log(html) 时，我没有看到新的 html 元素，所以看起来我没有到达 EventListener 这很奇怪，因为如果我将内容转储到监听器中，我就会得到一些数据。似乎我没有在响应中得到它

Answer 1

好的，明白了。问题是我在 POST_SUBMIT 事件中使用了 builder，但我必须使用 FormInterface。由于我无法在提交后添加它，所以我必须购买与 Symfony 的食谱中相同的回调函数

$formModifier = function (FormInterface $form, $preparedOptions) {
    $form->add($this->childIdentifier, ChoiceType::class, $preparedOptions);
};

然后监听器就这样构建了

$builder
    ->get('lang_switcher')
    ->addEventListener(
        FormEvents::POST_SUBMIT,
        function (FormEvent $event) use ($formModifier, $options) {
            $preparedOptions = $this->prepareOptions($options);
            $formModifier($event->getForm()->getParent(), $preparedOptions);
        }
    );