By johnhelen on

Hi

I have a form field like this

==========

$form['from'] = array('#type' => 'textfield',
'#title' => t('From'),
....
==========

I can see the form field in html source:


<div class="form-item" id="edit-from-wrapper">
 <label for="edit-from">From: </label>
....

Is there any simple way so I can add a class or id to this label (so I can change the label text using Javascript )

What I want is something like this in html:


<div class="form-item" id="edit-from-wrapper">
 <label id="label_id" for="edit-from" >From: </label>

Can I do it directly in the module or I have to do something in the theme

Many thanks
john

⋅ Categories: Drupal 6.x

Comments

shenagarg’s picture

shenagarg commented

Go through following link:
http://api.drupal.org/api/drupal/developer--topics--forms_api_reference....

It explains everything about drupal forms.

Hope it helps.

johnhelen’s picture

johnhelen commented

It looks like that I CAN NOT add an id for label in a form in module. That values is includes/form.inc file

Anonymous’s picture

Anonymous (not verified) commented

You can do this by adding a function in your theme template php, like this:

/**
 * ADDING CLASSES FOR WEBFORM ELEMENTS
 */
function yourthemename_form_element($element, $value) {
  // This is also used in the installer, pre-database setup.
  $t = get_t();

  $output = '<div class="form-item"';
  if (!empty($element['#id'])) {
    $output .= ' id="'. $element['#id'] .'-wrapper"';
  }
  $output .= ">\n";
  $required = !empty($element['#required']) ? '<span class="form-required" title="'. $t('This field is required.') .'">*</span>' : '';

  if (!empty($element['#title'])) {
    $title = $element['#title'];
    if (!empty($element['#id'])) {
      $output .= ' <label class="'. $element['#id'] .' normal" for="'. $element['#id'] .'">'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
    else {
      $output .= ' <label class="normal">'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
  }

  $output .= " $value\n";

  if (!empty($element['#description'])) {
    $output .= ' <div class="description">'. $element['#description'] ."</div>\n";
  }

  $output .= "</div>\n";

  return $output;
}

I just copied the function from the /includes/form.inc, edited the function name to match my theme (in the code above, change "yourthemename" to the name of your theme), and -- VOILA! -- a new class has been added to the label! I also added a class named "normal" so there is a general selector to differentiate these labels from labels for radio or checkbox elements.

Be sure to clear your theme registry in order to see the change.

Enjoy!
Anne

jaypan’s picture

jaypan
Location Victoria, BC
commented

You don't need to add an ID to the label at all. Just target it in your javascript using:

$("#edit-from-wrapper label")
(assuming you are using jquery).

Since IDs are unique, and form elements only have one label, the above selector will target that label and only that label.

Contact me to contract me for D7 -> D10/11 migrations.

zmove’s picture

zmove commented

Should be possible to add a class to label.

To be compatible with bootstrap horizontal form for example.

balapalanisamy’s picture

balapalanisamy commented

Hi, you don't need to use javascript for changing the field label.

you can use hook_form_alter in your custom module.

Refer the link http://api.drupal.org/api/drupal/developer--hooks--core.php/function/hoo...

gauravktomar’s picture

gauravktomar commented

Hi Johnhelen,

Ideally we can't add class or id in form label. but it can be easily done using javascript.

Using following code:
----- START -----
jQuery( document ).ready(function() {

jQuery( "label" ).addClass( "New class name" );

});
---- END ------

Best!
GMEET

z3cka’s picture

z3cka commented

For those looking to simply hide the label, like I was, you can use the #title_display property set to 'invisible'.