background image

Content tagged with: radio

Improving form validation usability for checkboxes and radio buttons

Eric's picture
Submitted by Eric on Thu, 07/10/2008 - 15:23

Normally when there is a form input error, Drupal highlights the form input by adding a red border and changing the text color. Unfortunately, nothing happens for checkboxes and radio buttons. Here's a little jQuery to add the error class to the label directly above a set of checkboxes or radios when an error occurs.

<?php
$('form#node-form div.form-item').each(function(){
  var result = 0;
  result += $(this).find('div.form-radios input.form-radio.error').length;
  result += $(this).find('div.form-checkboxes input.form-checkbox.error').length;
  if (result) $(this).find('label:first').removeClass('error').addClass('error');
});
?>

Adding an error indicator to radio CCK widgets using jQuery

Eric's picture
Submitted by Eric on Fri, 05/02/2008 - 07:52

You may have noticed that if you create a custom node type that has uses the radios widget, there is no visual error indicator attached to the radios. I added some jQuery to my theme to highlight the label of the radios when there is an error associated with them.

<?php
$(document).ready(function(){
  $('form#node-form div.form-item').each(function(){
    var result = $(this).find('div.form-radios input.form-radio.error').length;
    if (result) {
      $(this).find('label:first').removeClass('error').addClass('error');
    }
  });
});
?>

Using jQuery to change the CSS for CCK radio widgets to inline

Eric's picture
Submitted by Eric on Tue, 04/29/2008 - 09:21

Here's how you can change the layout of CCK radio widgets to inline using jQuery

<?php
$(document).ready(function(){
  $("form#node-form div.form-item div.form-radios div.form-item").css('display', 'inline');
});
?>

In my case, I wanted to change this layout for only one form. Unfortunately, there were not enough unique selectors assigned to the form elements, so I used a jQuery attribute selector to limit the match by the form's action.

<?php
$(document).ready(function(){
  $("form#node-form[@action='/MYPATH'] div.form-item div.form-radios div.form-item").css('display', 'inline');
});
?>

Creating a CCK field radio field of images

Eric's picture
Submitted by Eric on Tue, 04/29/2008 - 08:53

I wanted to add a CCK radio field to a node type that used images instead of text. The images were included in my module. First I created a CCK node type and added a field of text/radios. At the bottom of the page, you can enter PHP for your allowed value list...

<?php

$imagePath = base_path() . drupal_get_path('module', 'MYMODULE') . '/images';
return array(
  'smile' => "<img src='$imagePath/face-smile.png' />",
  'plain' => "<img src='$imagePath/face-plain.png' />",
  'sad' => "<img src='$imagePath/face-sad.png' />",
);
?>

Here's a screenshot of the result: