3 select in a form with Symfony - forms

Question

(sorry for my english...)
I need your help for my 3 selects in one form.
Select 1: I choose Pays
Select 2: I choose Regions who depend for the Pays
Select 3 : I choose Towns who depends Region
Actually I use javascript in Twig template to have options in the different select, but when I submit the Form, I doesn't have a value for the ville parameter in my object.
Here is my code for ville in the Form:
->add('ville', ChoiceType::class, [
'label' => 'Ville:',
'required' => true,
])
dd($partenaire)
console detail select after query
I have do with EntityType, but this load all the table...
Can someone help me ?
Tanks

Answer 1

I think you should add 2 new routes which return html, specifically the select HTML element with the data from the selected parent, ex:
#[Route('/regions-select', name: 'regions_select', methods: ['GET'])]
public function getRegionsSelect(Request $request): Response
{
$entity = new Entity();
$form = $this->createForm(
FooFormType::class,
$entity,
['pay' => $request->query->get('pay')]
);
return $this->render('_regions-select.html.twig', [
'form' => $form->createView(),
]);
}
Then the Form can look like this:
$builder
->add('district', EntityType::class, [
'placeholder' => 'Select Pay',
'label_attr' => ['class' => 'mb-0 d-block'],
'class' => Pay::class,
'choice_value' => 'id',
'choice_label' => 'name',
])
->add('region', EntityType::class, [
'class' => Region::class,
'query_builder' => function (RegionRepository $regionRepository) use ($options) {
return $regionRepository->regionsByPay((int) $options['pay']);
},
'choice_label' => 'name',
'choice_value' => 'id'
]);
You can create the twig file to render the form row for the regions select '_regions-select.html.twig':
{{ form_row(form.region, {
attr: {
'class': 'mb-3 form-control'
}
}) }}
And you can achieve this by listening to the change event or select event on the Pays dropdown via javascript like this:
$paySelect.on('change', (event) => {
const payId = event.target.value;
$.ajax({
url: BASE_URL+'/regions-select',
data: {
pay: payId,
},
success: function (html) {
const region = REGION_SELECT_FROM_CLASS_NAME //replace this with your jQuery/Javascript selector;
region.html($(html).find("option"));
region.val("").trigger("change");
},
});
});