How to set a CSS ID attribute to a Symfony2 form input

Question

This question is similar to another question. There the solution for setting the CSS class was to add it into the 3rd parameter of a call to FormBuilder::add():

->add('title', null, array('attr' => array('class'=>'span2')))

Unfortunately, this does not work for setting the CSS id. When I do

->add('title', null, array('attr' => array('id'=>'title-field')))

... this is ignored. The ID remains something like namespace_formtype_field.

How can I set the CSS ID, if at all?

Answer 1

You can do it when you render your field in twig, if you set your id outside of the 'attributes' array like so:

{{ form_widget(form.field, { 'id': 'my_custom_id',  'attr': { 'class' : 'my_custom_class }} )}}

Answer 2

At twig level, you can simply do this:

{{ form_widget(form. title, { 'id': 'title-field' }) }}

Tested on Symfony 2.3.4

Answer 3

Since an HTML element cannot have multiple ID's, what you're trying to accomplish isn't possible because Symfony already uses ID's on form elements.

The way to solve this would be to change your JavaScript to use classes instead and using

->add('title', null, array(
    'attr' => array(
        'class'=>'title-field'
    )
))

The other way is to change the ID's your JavaScript uses to the Symfony ones.