16

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?

Community
  • 1
  • 1
Olav
  • 1,602
  • 2
  • 16
  • 21
  • 1
    Do you really want to change default auto-generated ID? – Darmen Amanbay Jun 12 '13 at 18:16
  • 1
    Unfortunately, yes. I have a web application that I want to port to Symfony, but I need to keep the Javascript and functional tests working. Some of them rely on CSS IDs. – Olav Jun 12 '13 at 19:18
  • 2
    try with twig {{ form_widget(form, { 'attr': {'id': 'title-field'} }) }} – Nisam Jun 12 '13 at 20:21
  • Nissan, this will probably work and I will go this route if nothing else helps (I want to keep my tests working on either implementation), but I was hoping to keep rendering the whole form with a single {{ form_widget(edit_form) }}. – Olav Jun 13 '13 at 08:06
  • 1
    Have you looked into form theming? http://symfony.com/doc/current/cookbook/form/form_customization.html#form-theming I think that you could overwrite the base field type to include your custom ID attribute. – Michi Jun 13 '13 at 18:08
  • Michi, thank you very much, I was totally not aware of this possibility. – Olav Jun 14 '13 at 20:24
  • Using `attr : { id: title-field })` either using FormBuilder or Twig view will result in 2 id attributes on the input element (Symfony and custom). – piotr_cz Mar 05 '14 at 14:18
  • I believe that the symfony way is to do this in twig as its considered a part of the display logic, and its discouraged to do this on the form type itself. – Layton Everson Sep 03 '15 at 00:09

4 Answers4

25

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 }} )}}
Darryl Hein
  • 142,451
  • 95
  • 218
  • 261
mb3rnard
  • 397
  • 3
  • 12
  • 1
    The current "right" answer is wrong. In your Twig you can alter the id's as you have stated, this is EXTREMELY useful and applicable, however be careful to make your id's unique or you will get very unpredictable JS – Zjoia Aug 19 '14 at 02:45
  • thank you : {{ form_widget(form.address, {'id': 'autoComplete', 'attr': {'class': 'form-control','type': 'search'}}) }} it works for me – Khaled Boussoffara Dec 15 '21 at 15:22
10

At twig level, you can simply do this:

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

Tested on Symfony 2.3.4

crmpicco
  • 16,605
  • 26
  • 134
  • 210
Żabojad
  • 2,946
  • 2
  • 32
  • 39
4

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.

Pier-Luc Gendreau
  • 13,553
  • 4
  • 58
  • 69
  • Pier-Luc, thank you, but either of your suggestions means that I have two versions of my tests and Javascript, one for Symfony, one for the other implementation. I'd rather avoid this. – Olav Jun 13 '13 at 08:07
1

I am convinced now there is no easy answer. The closest seems to in fact change the markup by using form theming. Thank you Michi for pointing this way.

Community
  • 1
  • 1
Olav
  • 1,602
  • 2
  • 16
  • 21