Symfony 2 - How to edit radio button group

Question

Hi I'm new to Symfony and I have the following problem:

I'm implementing a rate form so I added a radio button group so select a value from 1 to 5. The idea is yo show five stars instead of the classic radio buttons so I need to add a class to each input field.

The problem is that symfony adds the class to the hole radio group and not each input.

I searched for a solution and the closest hint I found was this:

{% block choice_widget_expanded %}
{% spaceless %}
    <div {{ block('widget_container_attributes') }}>
        {% for child in form %}
            {{ form_widget(child, {'attr': {'class': 'rating-input'}}) }}
        {% endfor %}
    </div>
{% endspaceless %}
{% endblock choice_widget_expanded %}

The code above also wraps the radio group on a div with the class 'rating-input'.

This is the test form code in the controller:

$form->createFormBuilder()
     ->add('rate', 'choice', array(1 => 1, 2 => 2, 3 => 3, 4 => 4, 5 => 5), 'expanded' => true, 'multiple' => false))
     ->add('save', 'submit')
     ->getForm();

Here's a sample image of the html I got: Any ideas how can I achieve what I want? Thanks in advance.

Answer 1

Ok here's what I did. I used form theming to override the way each input is displayed. To do that you have to add a "form_theme form self" tag and override the choice_widget block in your twig where the form is to be rendered.

{% extends ::base.html.twig %}

{% form_theme form _self %}

{% block choice_widget_expanded %}
    <div {{ block('widget_container_attributes') }}>
        {% for child in form %}
            {{ form_widget(child, {'attr': 'star'}) }}
            {{ form_label(child) }}
        {% endfor %}
    </div>
{% endblock %}

Thanks anyway for the answers.

Answer 2

Easier than all this would be to simply loop through the individual radio buttons:

{% for radioRate in form.rate %}
    {{ form_widget(radioRate, {'attr': 'star'}) }}
{% endfor %}

Answer 3

There is several possible solutions:

jQuery

See this fiddle example. Move your mouse pointer on the stars, then click on the last star.

The ideas are:

1. Add 5 <span> elements containing each one star
2. Set a value from 1 to 5 to each <span>
3. When the cursor hovers a <span>, color all the previous <span> in Gold
4. When clicking a star, get the value of the <span> and change the <select> value
5. When leaving the box, display as many stars as the value of <select> (without this, you can click on the third star, hover 5 stars, leave the box and the <select> will have a different value (3) than the number of stars displayed (5))

You can hide the <select> element. In fact, it should not be a problem to change the type of input (radio, select, numeric field, etc.).

Edit: jsffidle with same stars modifying values of <input type="radio">.

Old solution:

Styling each value

Why do you want to add some classes to your radio <label>s?

You can add some style to the <label>s with CSS, for example:

label[for=tag_rate_0] {
    color:Green;
}
label[for=tag_rate_1] {
    color:Red;
}
label[for=tag_rate_2] {
    color:Blue;
}
label[for=tag_rate_3] {
    color:Orange;
}
label[for=tag_rate_4] {
    color:Purple;
}

See this example at jsfiddle. label[for=tag_rate_0] correspond to the 1 score, this is due to the way Symfony2 count fields.

Displaying stars

You can also display 1 to 5 stars by modifying your form:

->add('rate', 'choice', array(
    'choices' => array(
        1 => '*',
        2 => '**',
        3 => '***',
        4 => '****',
        5 => '*****'
    ),
    'expanded' => true,
    'multiple' => false
))

It will display * to ***** for the scores. See this example at jsfiddle.

jQuery UI

The button widget can be use to display a nice choice widget. See this example at jsfiddle.