Symfony:ajax调用后未提交的表单字段

时间:2017-05-18 10:08:59

标签: ajax forms symfony

我有一个包含3个选择框的表单。第二个选择框选项取决于第一个选择选项。第三个选择选项取决于第二个选择选项。 我使用ajax填充第二个和第三个选择框中的选项。但是,在提交表单后,不会发布第二个和第三个选择的值。

这是我的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);
    }

这是Ajax调用:

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);
});

类型(第一个选择)已发布但其他2个未发布。我错过了什么?

1 个答案:

答案 0 :(得分:3)

检查docs jQuery.post,第二个参数是要发布的数据 - 以普通对象或字符串形式。

您可能还想使用Twig path()函数来避免以后重写内容:

var typeId = $('#Typ').val();

var url = '{{ path('your_route_name', {'type': '__TYPE__'}) }}';

url = url.replace('__TYPE__', typeId);

$.post(
    url,
    $("#yourForm").serialize(),
    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);
    }
);