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?

8
  • 1
    Do you really want to change default auto-generated ID? Commented Jun 12, 2013 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. Commented Jun 12, 2013 at 19:18
  • 2
    try with twig {{ form_widget(form, { 'attr': {'id': 'title-field'} }) }} Commented Jun 12, 2013 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) }}. Commented Jun 13, 2013 at 8:06
  • 1
    Have you looked into form theming? symfony.com/doc/current/cookbook/form/… I think that you could overwrite the base field type to include your custom ID attribute. Commented Jun 13, 2013 at 18:08

4 Answers 4

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 }} )}}
Sign up to request clarification or add additional context in comments.

2 Comments

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
thank you : {{ form_widget(form.address, {'id': 'autoComplete', 'attr': {'class': 'form-control','type': 'search'}}) }} it works for me
10

At twig level, you can simply do this:

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

Tested on Symfony 2.3.4

Comments

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.

1 Comment

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.
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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.