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

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>

我收到错误消息Buttons do not support event listeners. 所以我尝试了一个隐藏字段。 我将隐藏字段添加到Form，将EventListener设置为Form，然后将此data添加到我的AJAX请求中

data[$('#id_of_hidden_field').attr('name')] = 1;

但是，这什么也没做。 公鸡手册中的示例是在提交选择字段之后，因此我不知道如何使它适应我的需求。 我不能使用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);
        }
    );

Answer 2

    <script type="text/javascript">
    function inputBtn(){
    var input=document.createElement('input');
    input.type="file";
    input.name="img[]";
    input.multiple="multiple";
    //without this next line, you'll get nuthin' on the display
    document.getElementById('target_div').appendChild(input);
}
</script>

<button id="ifile" onclick="inputBtn();">create</button>
<form action="test.php" method="post" enctype="multipart/form-data">
<div id="target_div"></div>
<input type="submit">
</form>