Let's say I have an entity User.
The User can have many Address.
In Address There's 2 fields :
- Country
- State
What I want :
- When the user create his account, he can add as many address as he wants.
- When the user select a Country, it populate the State field based on the country.
What I've done :
UserType :
/**
* @param FormBuilderInterface $builder
* @param array $options
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('address', 'collection', array(
'type' => new AddressType(),
'allow_add' => true,
'allow_delete' => true))
//...
}
The Javascript to add address (which is working : based on symfony doc):
<script type="text/javascript">
$(document).ready(function() {
var $container = $('div#mybundle_user_address');
var $addLink = $('<a href="#" id="add_source" class="">Add address</a>');
$container.append($addLink);
$addLink.click(function(e) {
addAddress($container);
e.preventDefault();
return false;
});
var index = $container.find(':input').length;
$container.children('div').each(function() {
addDeleteLink($(this));
});
function addAddress($container) {
var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Address n°' + (index+1))
.replace(/__name__/g, index));
addDeleteLink($prototype);
$container.append($prototype);
index++;
}
function addDeleteLink($prototype) {
$deleteLink = $('<a href="#" class="btn btn-danger">Delete</a>');
$prototype.append($deleteLink);
$deleteLink.click(function(e) {
$prototype.remove();
e.preventDefault();
return false;
});
}
});
</script>
Ok, but now, How do I add I call a .change() on the select created after clicking on "add address" ?
Because if you add many address, divs will have this name :
#mybundle_user_address_0_country#mybundle_user_address_1_country#mybundle_user_address_2_country- ...
So how do I select the div to have a .change() call of these divs ? And where do I put the javascript ? Inside the first javascript when I add divs ? Or outside ?
