动态表单与Javascript

我有一个

Serveur

实体的表单，其中有一个动态部分：我可以添加我想要的任意多个

typesDetails

：

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        //...
        ->add('typesDetails', 'collection', array(
            'type' => new LienServTypeDetailType(),
            'allow_add' => true,
            'allow_delete' => true))
    ;
}

在我看来，使用一些Javascript：

<script type="text/javascript">
    $(document).ready(function() {
        var $container = $('div#mybundle_serveur_typesDetails');
        var $addLink = $('<a href="#" id="add_type" class="">Ajouter un type</a>');
        $container.append($addLink);
        $addLink.click(function(e) {
            addSource($container);
            e.preventDefault(); // évite qu'un # apparaisse dans l'URL
            return false;
        });

        var index = $container.find(':input').length;

        if (index == 0) {
            addSource($container);
        } else {
            $container.children('div').each(function() {
                addDeleteLink($(this));
            });
        }

        function addSource($container) {
            var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'type n°' + (index+1))
                .replace(/__name__/g, index));

            addDeleteLink($prototype);

            $container.append($prototype);

            index++;
        }

        function addDeleteLink($prototype) {
           $deleteLink = $('<a href="#" class="btn btn-danger">Supprimer</a>');

            $prototype.append($deleteLink);

            $deleteLink.click(function(e) {
                $prototype.remove();
                e.preventDefault(); // évite qu'un # apparaisse dans l'URL
                return false;
            });
        }
    });
</script>

然后假设您在视图中添加Javascript，如下所示：

<script type="text/javascript">
    var $zone = $('#mybundle_serveur_typesDetails_4_type');
    $zone.change(function () {
        var $form = $(this).closest('form');

        var data = {};
        data[$zone.attr('name')] = $zone.val();

        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: data,
            success: function(html) {
                $('#mybundle_serveur_typesDetails_4_detailType').replaceWith(
                    $(html).find('#mybundle_serveur_typesDetails_1_detailType')
                );
            }
        });
    });

</script>

---

我该怎么做？

帮助，我很接近，但我在这里^^你有在线版本吗？我不确定你的问题，但似乎你需要在每个区域执行foreach。类似这样的东西：$（'div#mybundle_serveur_typesdeails>div'）。每个（function（）{$zone.change（…）}）@谢谢你的回答。我不确定这是否有效，看，我为div的名字添加了一个示例。我需要对每个divHelp进行更改（），我很接近，但我在这里^^你有在线版本吗？我不确定你的问题，但似乎你需要对每个区域执行foreach。类似这样的东西：$（'div#mybundle_serveur_typesdeails>div'）。每个（function（）{$zone.change（…）}）@谢谢你的回答。我不确定这是否有效，看，我为div的名字添加了一个示例。我需要对每个div进行更改（）

<script type="text/javascript">
    var $zone = $('#mybundle_serveur_typesDetails_4_type');
    $zone.change(function () {
        var $form = $(this).closest('form');

        var data = {};
        data[$zone.attr('name')] = $zone.val();

        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: data,
            success: function(html) {
                $('#mybundle_serveur_typesDetails_4_detailType').replaceWith(
                    $(html).find('#mybundle_serveur_typesDetails_1_detailType')
                );
            }
        });
    });

</script>

    var $zone = $('#mybundle_serveur_typesDetails_1_type');
    var $zone = $('#mybundle_serveur_typesDetails_2_type');
    var $zone = $('#mybundle_serveur_typesDetails_3_type');
    var $zone = $('#mybundle_serveur_typesDetails_4_type');
    ...