Webform Radio buttons are not getting "radio-checked" class when clicked on

Question

I've developed webforms before where I set a component to "Select options" and the design has required these options to look like buttons, so with a bit of simple CSS, we can achieve this:

form .form-radios label{background-color:#bebebe; border-radius:3px; margin-right:5px; border: 1px solid #b6b6b6; padding: 10px; text-align: center; color:#232323;}
form .form-radios label{float: left; width:200px;}
form .form-radios label .form-radio {xposition: absolute; xleft: -99em;}

(the prefix "x" added to the last 2 styles are obviously removed before deployment, it's just so I can see the radio buttons)

Now, when I click on the pretend buttons, they usually gain the class "radio-checked" as per this example on a previous site I've built https://www.feelthepulse.co.uk/request-callback

However, it doesn't work on my current build (you click the button, but no extra classes are added). I've looked for any modules I might have forgotten about, and I can't see any options for the webform regarding ajax or anything.

Has anyone else had this problem, or know what I'm missing ?

Answer 1

After a bit more digging, it appears it's my memory that has failed me. This functionality is provided by Javascript.
So I'm placing my solution here in case anyone would like to make their select options look like buttons.

You have my CSS above. Next you need to add a javascript folder & file in your sites> all >themes > [theme_name] directory.

I've placed a new folder and file in the above path : js > webform_tweaks.js

Inside the webform_tweaks.js file, place this code:

(function($) { // DOM ready $(function(){ // add a radio-checked additional CSS class to the parent label $(".webform-client-form .form-radios input").click(function(){ $(this.parentNode.parentNode.parentNode).find('.form-item .control-label').removeClass('radio-checked'); $(this.parentNode).addClass('radio-checked'); }); }); })(jQuery);

You need to reference this javascript file in your [theme_name].info file (found in the root of your sites> all >themes > [theme_name] directory.)

Open that file and add:

scripts[] = js/webform_tweaks.js

You will also need to flush your CSS & Javascript caches before you see the change.

Hopefully, now you should be able to click on your "pretend" button and apply a style to it using this new "radio-checked" class and make the button looked clicked by adding a background colour or something to it.