Question

I’d like to create an admin panel for one of my projects, so I started with this tutorial:
How to Embed a Collection of Forms

Continued with creating double embedded form, so i have an object, what have objects, and these objects also have objects 😀
The Doctrine mapping is good, and works, the problem:
When I click on the “Add new Property” it creates the property, but when I click on the “Add Detail” (which adds a detail to the property) it creates the Detail’s fields, but one extra field too:
<label class="required">1label__</label>
The formtype codes:
For the main class

$builder
        ->add('forma')
    ;

    $builder->add('properties', 'collection',array(
        'type' => new PropertyType(),
        'allow_add' => true,
        'allow_delete' => true,
        'by_reference' => false
        ));

For the property class:

$builder
        ->add('nev')
        //->add('szokokut')
    ;

    $builder->add('details', 'collection',array(
        'type' => new DetailType(),
        'allow_add' => true,
        'allow_delete' => true,
        'by_reference' => false
        ));

For the Detail class:

$builder
        ->add('description')
        //->add('property')
    ;

These codes are from the buildFrom() functions.

Any idea why is there the extra field?

The first prototype:

<div id="szokokut_storebundle_szokokuttype_properties___name__"><div><label for="szokokut_storebundle_szokokuttype_properties___name___nev" class="required">Nev</label><input type="text" id="szokokut_storebundle_szokokuttype_properties___name___nev" name="szokokut_storebundle_szokokuttype[properties][__name__][nev]" required="required" maxlength="100" /></div><div><label class="required">Details</label><div id="szokokut_storebundle_szokokuttype_properties___name___details" data-prototype="&lt;div&gt;&lt;label class=&quot;required&quot;&gt;__name__label__&lt;/label&gt;&lt;div id=&quot;szokokut_storebundle_szokokuttype_properties___name___details___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;szokokut_storebundle_szokokuttype_properties___name___details___name___description&quot; class=&quot;required&quot;&gt;Description&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;szokokut_storebundle_szokokuttype_properties___name___details___name___description&quot; name=&quot;szokokut_storebundle_szokokuttype[properties][__name__][details][__name__][description]&quot; required=&quot;required&quot; maxlength=&quot;100&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"></div></div></div>

The second:

<div><label class="required">1label__</label><div id="szokokut_storebundle_szokokuttype_properties_1_details_1"><div><label for="szokokut_storebundle_szokokuttype_properties_1_details_1_description" class="required">Description</label><input type="text" id="szokokut_storebundle_szokokuttype_properties_1_details_1_description" name="szokokut_storebundle_szokokuttype[properties][1][details][1][description]" required="required" maxlength="100" /></div></div></div>

The problem will be here:
Its from the tutorial (with a little change) and it replaces the __name__ field in both of the prototypes :/

var $addPropertyLink = $('<a href="#" class="add_property_link">Tulajdonság hozzáadása</a>');
var $newLinkLi = $('<p></p>').append($addPropertyLink);

jQuery(document).ready(function() {
propertyHolder.append($newLinkLi);

$addPropertyLink.on('click', function(e) {
    e.preventDefault();

    addPropertyForm(propertyHolder, $newLinkLi);
    });
});

function addPropertyForm(collectionHolder, $newLinkLi) {
    // Get the data-prototype we explained earlier
    var prototype = collectionHolder.attr('data-prototype');

    // Replace '__name__' in the prototype's HTML to
    // instead be a number based on the current collection's length.
    var newForm = prototype.replace(/__name__/g, collectionHolder.children().length);

    // Display the form in the page in an li
    var $newFormLi = $('<p></p>').append(newForm);
    $newLinkLi.before($newFormLi);
    addFormDeleteLink($newFormLi);
    var $addDetailLink = $('<a href="#" class="add_detail_link">Részlet hozzáadása</a>');
    var $LinkLi = $('<p></p>').append($addDetailLink);
    $newFormLi.find('div[id$=_details]').append($LinkLi);

    $addDetailLink.on('click',function(e){
        e.preventDefault();

        addDetailForm($newFormLi.find('div[id$=_details]'),$LinkLi);
    });



}

function addFormDeleteLink($FormLi) {
    var $removeFormA = $('<a href="#">törlés</a>');
    $FormLi.append($removeFormA);

    $removeFormA.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();

        // remove the li for the tag form
        $FormLi.remove();
    });
}

function addDetailForm(collectionHolder,$newLinkLi){
    // Get the data-prototype we explained earlier
    var prototype = collectionHolder.attr('data-prototype');

    // Replace '__name__' in the prototype's HTML to
    // instead be a number based on the current collection's length.
    var newForm = prototype.replace(/__name__/g, collectionHolder.children().length);

    // Display the form in the page in an li
    var $newFormLi = $('<p></p>').append(newForm);
    $newLinkLi.before($newFormLi);
    addFormDeleteLink($newFormLi);

}

Answer 1

You should try to make sure your javascript only acts on the right set of elements, by using a good enough selector.
Show your js for a more detailed answer.

UPDATE
Look at the code

There seems to be an undocumented prototype_name option that you can change from name to whatever you want for one of your prototypes.