如何在空集合表单中动态添加输入字段? [英] How to add an entry field dynamically in an empty collection form?

问题描述

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

我想创建一个可以保留广告的表单.我的问题来自我的 ManyToMany 项目图像".我通过图像"表单获得的新 div 如下所示:

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

字段url"&alt"被卡在子 div 的 data-prototype 属性中我应该如何解决这个问题?

这里是我的代码示例，如果您需要完整的文件，我可以发布它们.

成型机:

$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' =>真的，'allow_delete' =>真的))->add('save', SubmitType::class, array('label' => 'Save'));

图像生成器:

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

控制器 addRentAction :

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

解决方案

您需要一些 javascript 来添加字段，这是一种使用 jQuery 轻松完成的方法:

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

<!-- ... --><button id="add_image">添加图片</button><script src="/js/jquery-2.2.1.min.js"></script><脚本>函数 addEntry() {var $container = $('#annonce_rent_images'),$prototype = $container.data('prototype');$prototype.replace(/__name__/g, $container.children('div').length);$container.append($prototype);}添加条目()；//默认添加第一个字段$('#add_image').click(addEntry);

I am encountering an issue with my form and I need help...

I want to create a form which can persist an advert. My issue come from my ManyToMany item 'images'. The new div i get by the 'images' form look like this:

<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>

The fields "url" & "alt" are stuck into the data-prototype attribute of the sub-div How am I supposed to fix that?

Here is few samples of my code, if you need complete files i can post them.

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

解决方案

You need some javascript to add the fields, here's a way to easily do it with 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>

这篇关于如何在空集合表单中动态添加输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！