Symfony 4 dependent dropdown choice type - php

Question

I'm trying to make dependent choice type in Symfony 4.
I would like to activate ring type when ring shape is chosen, but I found that ring type is not activating even though ring shape is selected.
I put placeholder in ring type, so the placeholder text can be changed once ring shape is chosen. but it's not changing as well.
Since ring shape itself is working, I guess something is missing to connect ring shape and ring type but I have no idea how to fix this issue...
This is my form
/**
* {#inheritdoc}
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$finder = new Finder();
$finder->directories()->in('html/upload/save_image/CustomRing/ring')->depth('==0');
$dir_array = [];
if($finder->hasResults()){
foreach($finder as $dir){
array_push($dir_array, $dir->getFilename());
}
$dir_array = array_combine($dir_array, $dir_array);
}
natsort($dir_array);
$product = $this->customProductRepository->customProductFindByName();
$productId = $product[0]->getId();
$builder
->add('product_id', HiddenType::class,['data'=> $productId])
->add('ring_name', TextType::class)
->add('ring_shape', ChoiceType::class, array(
'choices' => $dir_array,
'placeholder' => 'test'
))
->add('price', IntegerType::class)
->add('save', SubmitType::class, ['label' => 'Save']);
$builder->addEventListener(
FormEvents::PRE_SET_DATA,
function (FormEvent $event){
$data = $event->getData();
//dump($data->getRingShape());
$ring_shape = $data->getRingShape();
$this->addRingTypeField($event->getForm(), $ring_shape);
}
);
$builder->get('ring_shape')->addEventListener(
FormEvents::POST_SUBMIT,
function (FormEvent $event){
dump('dd');
$ring_shape = $event->getForm()->getData();
$this->addRingTypeField($event->getForm()->getParent(), $ring_shape);
}
);
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => Ring::class,
]);
}
private function getRingTypeChoices(string $ring_shape):array
{
$finder = new Finder;
$path = 'html/upload/save_image/CustomRing/ring/'.$ring_shape.'/';
$finder->directories()->in($path)->depth('==0');
$dir_array = [];
if($finder->hasResults()){
foreach($finder as $dir){
array_push($dir_array, $dir);
}
$dir_array = array_combine($dir_array, $dir_array);
}
return $dir_array;
}
public function addRingTypeField(FormInterface $form, ?string $ring_shape){
dump($ring_shape);
$ring_type_choices = null === $ring_shape ? [] : $this->getRingTypeChoices($ring_shape);
$form->add('ring_type', ChoiceType::class,[
'placeholder' => null === $ring_shape ? 'please select ring shape first' : 'now select ring type',
'choices' => $ring_type_choices,
'disabled' => null === $ring_shape,
'invalid_message' => false,
]);
}
and this is my twig
{{form_start(form)}}
{{form_row(form.ring_name)}}
{{form_row(form.ring_shape)}}
{{form_row(form.ring_type)}}
{{form_row(form.size)}}
{{form_row(form.price)}}
{{form_end(form)}}
and this is the controller
public function AddRing(Request $request)
{
$ring = new Ring();
$ring->setName('ring');
$form = $this->createForm(RingType::class, $ring);
$form->handleRequest($request);
if($form->isSubmitted() && $form->isValid()){
$ring = $form -> getData();
$doct = $this->getDoctrine()->getManager();
//tell doctrine you want to save the ring
$doct->persist($ring);
//execute the queries
$doct->flush();
return $this->redirectToRoute('custom_ring_list');
}
return['form' => $form->createView()];
}

Answer 1

I fixed with putting query
<script>
var $ring_shape = $('#ring_ring_shape');
$ring_shape.change(function(){
var $form = $(this).closest('form');
var data = {};
data[$ring_shape.attr('name')] = $ring_shape.val();
console.log(data);
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: data,
success: function(html){
$('#ring_ring_type').replaceWith(
$(html).find('#ring_ring_type')
);
}
});
})
</script>