I have a form that includes 3 select boxes. The options in the second select box depend on the selection made in the first select box, and the options in the third select box depend on the selection made in the second select box. I am using ajax to dynamically populate the options in the second and third select boxes. However, after submitting the form, the values of the second and third selects are not being posted.
Below is my FormType:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('Typ', EntityType::class, array(
'class' => 'AppBundle:MaterialTypes',
'placeholder' => 'Choose an option'
))
->add('Kategorie', ChoiceType::class, array(
'placeholder' => 'Choose an option',
'mapped' => false,
'choices' => array(),
'choices_as_values' => false
))
->add('Bezeichnung', ChoiceType::class, array(
'placeholder' => 'Choose an option',
'mapped' => false,
'choices' => array(),
'choices_as_values' => false
))
->add('anzahl',null, array('required'=> true))
->add('Preis',null, array('required'=> true));
$builder->addEventListener(FormEvents::POST_SUBMIT, function (FormEvent $event) {
$event->stopPropagation();
}, 900);
}
Additionally, this is the Ajax call I am making:
var typeId = $('#Typ').val();
$.post( "/app_dev.php/material/"+typeId,
function( data ) {
$('#Kategorie').empty();
$('#Bezeichnung').empty();
var result = JSON.parse(data);
var options ='<option value="" disabled selected>Choose an option</option>';
for (var i = 0; i < result.length; i++) {
options +='<option value="'+result[i]['id']+'">'+result[i]['name']+'</option>'
}
$('#Kategorie').append(options);
});
While the type (first select) is successfully posted, the selections in the other two selects are not being submitted. What could be causing this issue?