I am currently trying to build a form which has a series of select elements, each of which triggers display of a textarea specific to that select element which is initially hidden.

Currently the select element has a callback to a function which is using ajax_command_css (to toggle the view of the textbox) and also ajax_command_invoke to add a class to the textbox so that it is still shown after validation errors are triggered. Currently after a validation event, the classes added using this method are lost so the textboxes remain hidden.

Select and textareas are created like this:

$form['2og_select'] = array(
    '#prefix' => $blurb,
    '#title' => t('2OG'),
    '#type' => 'select',
    '#options' => array(
      t(' '),t('1'),t('2'),t('3'),t('4'),t('5'),
    '#ajax' => array(
      'callback' => 'show_comments_js',
      'event' => 'change',
      'effect' => 'fade',
      'progress' => array(
        'message' => '',
        'type' => 'throbber',
  $form['2og_textarea'] = array(
    '#type' => 'textfield',
    '#maxlength' => 512,
    '#suffix' => ('<div style="clear:both;"></div>'),
    '#attributes' => array(
      'class' => array('comments'),

Callback function looks like this:

function show_comments_js($form, &$form_state) {

  $commands = array();

  $triggerName = $form_state['triggering_element']['#name'];
  $triggerValue = $form_state['triggering_element']['#value'];

  $name_bits = explode('_',$triggerName);
  if ($triggerValue != '0') {
    $commands[] = ajax_command_css('#edit-' . $name_bits[0]  . '-textarea', array('display' => 'inline'));
    $commands[] = ajax_command_invoke('#edit-' . $name_bits[0]  . '-textarea', addClass, array('show-comments'));
  else {
    $commands[] = ajax_command_css('#edit-' . $name_bits[0]  . '-textarea', array('display' => 'none'));
    $commands[] = ajax_command_invoke('#edit-' . $name_bits[0]  . '-textarea', removeClass, array('show-comments'));

  return array('#type' => 'ajax', '#commands' => $commands);

I have also noticed that the id of the form has '--2' appended to it after submitting, could this be related?

Would using an ajax validation tied to the submit button have the same effect?


2 Answers 2


Yes, the IDs of an element change when it's being reloaded using AJAX. That's supposed to be a feature. :/ You might try using a class to target your textareas instead.

  • Cheers, that's confirmed what I suspected. The only problem is, the form isn't retaining the classes added between submitting and validating. Oct 5, 2011 at 21:16

What I did to get round this was to use the highly useful #states property in the Form API - set the textarea display to be dependent on the select box having a value other than 0 selected. Did the trick without too much hassle!

For an example of this go to

form_example_states_form documentation

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.