Question

我的表格遇到问题，我需要帮助...

我想创建一个可以保留广告的表单。我的问题来自我的ManyToMany项目'images'。我通过'images'形式获得的新div看起来像这样：

<div><label class="required">Images</label><div id="annonce_rent_images" data-prototype="<div><label class=&quot;required&quot;>__name__label__</label><div id=&quot;annonce_rent_images___name__&quot;><div><label for=&quot;annonce_rent_images___name___url&quot; class=&quot;required&quot;>Url</label><input type=&quot;url&quot; id=&quot;annonce_rent_images___name___url&quot; name=&quot;annonce_rent[images][__name__][url]&quot; required=&quot;required&quot; /></div><div><label for=&quot;annonce_rent_images___name___alt&quot; class=&quot;required&quot;>Alt</label><input type=&quot;text&quot; id=&quot;annonce_rent_images___name___alt&quot; name=&quot;annonce_rent[images][__name__][alt]&quot; required=&quot;required&quot; /></div></div></div>"></div></div>

字段“url”＆amp; “alt”被固定在sub-div的data-prototype属性中我该如何解决这个问题？

以下是我的代码的一些示例，如果您需要完整的文件我可以发布它们。

FORMBUILDER：

$builder
        ->add('name', TextType::class)
        ->add('description', TextType::class)
        ->add('price', TextType::class)
        ->add('location', TextType::class)
        ->add('zipcode', TextType::class)
        ->add('images', CollectionType::class, array(
            'entry_type'         => 'LAMainBundle\Form\ImageType',
            'allow_add'    => true,
            'allow_delete' => true
        ))
        ->add('save', SubmitType::class, array('label' => 'Save'))
    ;

IMAGEBUILDER：

$builder
        ->add('url',    UrlType::class)
        ->add('alt',    TextType::class)
    ;

CONTROLLER addRentAction：

$annonce = new AnnonceRent();

    $form = $this->createForm('LAMainBundle\Form\AnnonceRentType');
    return $this->render('LAMainBundle:Admin:addrent.html.twig', array(
        'form' => $form->createView(),
    ));

Answer 1

你需要一些javascript来添加字段，这里有一种方法可以轻松地使用jQuery：

<div>
    <label class="required">Images</label>
    <div id="annonce_rent_images" data-prototype="<div><label class=&quot;required&quot;>__name__label__</label><div id=&quot;annonce_rent_images___name__&quot;><div><label for=&quot;annonce_rent_images___name___url&quot; class=&quot;required&quot;>Url</label><input type=&quot;url&quot; id=&quot;annonce_rent_images___name___url&quot; name=&quot;annonce_rent[images][__name__][url]&quot; required=&quot;required&quot; /></div><div><label for=&quot;annonce_rent_images___name___alt&quot; class=&quot;required&quot;>Alt</label><input type=&quot;text&quot; id=&quot;annonce_rent_images___name___alt&quot; name=&quot;annonce_rent[images][__name__][alt]&quot; required=&quot;required&quot; /></div></div></div>">
    </div>
</div>

<!-- ... -->

<button id="add_image">Add image</button>
<script src="/js/jquery-2.2.1.min.js"></script>
<script>
    function addEntry() {
        var $container = $('#annonce_rent_images'),
            $prototype = $container.data('prototype');

        $prototype.replace(/__name__/g, $container.children('div').length);
        $container.append($prototype);
    }
    addEntry(); // add a first field by default
    $('#add_image').click(addEntry);
</script>

如何在空集合表单中动态添加输入字段？

1 个答案: