Drupal 7 checkboxes array replace with ajax callback

Question

I have the state field as dropdown. While onchange the state the cities should be viewed in check boxes. Below is my code

$form['rate_the_service']['state'] = array(
  '#type' => 'select',
  '#prefix'=>'<div id="dropdown-third-replace">',
  '#suffix'=>'</div>',
  '#options'=>array(
    '0' => t('state1'),
    '1' => t('state2'),
    '2' => t('state3')
  ),
  '#attributes' => array(
    'selected' => array('selected')
  ),
  '#validated' => TRUE,
  '#ajax' => array(
    'callback' => 'ajax_example_dependent_dcheck_state_callback',
    'wrapper' => 'checkboxes-four-replace',
  ),
  '#suffix'=>'</div>',
);

So while on change the state the cities will be displayed in check boxes using the function callback "ajax_example_dependent_dcheck_state_callback"

Below is the default city code:

$cityarray = array(
  '1' => 'chk1'
);

$form['rate_the_service']['city'] = array(
  '#prefix'=>'<div id="checkboxes-four-replace">',
  '#type' => 'checkboxes',
  '#options' => $cityarray,
  '#default_value' => isset($values['city']) ? $values['city'] : NULL,
  '#suffix'=>'</div></div>',
);

/////////// On changege ajax_example_dependent_dcheck_state_callback function call

function ajax_example_dependent_dcheck_state_callback($form, $form_state) {
  $state = $form_state['values']['state'];
  $city_array = array(
    '0' => 'city1',
    '2' => 'city2',
    '3' => 'city3'
  );
  $options[$state] = $city_array;
  $form['rate_the_service']['city']['#options'] = $city_array;
  return $form['rate_the_service']['city'];
}

While onchange the state the 'checkboxes-four-replace' will be replaced with the city1,2,3 checkboxes

The onchange function is not working. If i change the type as ''#type' => 'select' ' instead of " '#type' => 'checkboxes' " its working fine. But i need tis as checkboxes. What i am wrong here. Please help me.

Answer 1

The beginning of your post is confusing: your sentence states "While onchange the state the cities should be viewed in check boxes. Below is my code" ~ the states should be checkboxes or a select?

Either way, I have this as working code with states as a 'select' and cities as 'checkboxes':

function state_form($form, &$form_state) {
  $form = array();

  $form['rate_the_service']['state'] = array(
    '#type' => 'select',
    '#prefix'=>'<div id="dropdown-third-replace">',
    '#suffix'=>'</div>',
    '#options'=>array(
      '0' => t('Ohio'),
      '1' => t('New York'),
    ),
    '#validated' => TRUE,
    '#ajax' => array(
      'event' => 'change',
      'callback' => 'ajax_example_dependent_dcheck_state_callback',
      'wrapper' => 'checkboxes-four-replace',
    ),
  );

  $city_array = array(
    '1' => array(
      '1' => 'Cincinnati',
      '2' => 'Cleveland',
      '3' => 'Toledo'
    ),
    '2' => array(
      '4' => 'New York City',
      '5' => 'Buffalo',
      '6' => 'Syracuse'
    ),
  );

  if (isset($form_state['values']['state']) && $form_state['values']['state'] == 1) {
    $form['rate_the_service']['city'] = array(
      '#prefix'=>'<div id="checkboxes-four-replace">',
      '#type' => 'checkboxes',
      '#options' => $city_array[2],
      '#default_value' => isset($values['city']) ? $values['city'] : array('1'),
      '#suffix'=>'</div></div>',
    );
  } else {
    $form['rate_the_service']['city'] = array(
      '#prefix'=>'<div id="checkboxes-four-replace">',
      '#type' => 'checkboxes',
      '#options' => $city_array[1],
      '#default_value' => isset($values['city']) ? $values['city'] : array('2'),
      '#suffix'=>'</div></div>',
    );
  }
  return $form;
}

/**
 * Ajax Callback for development_form
 */
function ajax_example_dependent_dcheck_state_callback($form, $form_state) {
  return $form['rate_the_service']['city'];
}

Optionally, if you wanted state to be 'checkboxes' as well as cities, you could do this:

function state_form($form, &$form_state) {
  $form = array();

  $form['rate_the_service']['state'] = array(
    '#type' => 'checkboxes',
    '#prefix'=>'<div id="dropdown-third-replace">',
    '#suffix'=>'</div>',
    '#options'=>array(
      'ohio' => t('Ohio'),
      'new_york' => t('New York'),
    ),
    '#validated' => TRUE,
    '#ajax' => array(
      'event' => 'change',
      'callback' => 'ajax_example_dependent_dcheck_state_callback',
      'wrapper' => 'checkboxes-four-replace',
    ),
  );

  $city_array = array(
    '1' => array(
      '1' => 'Cincinnati',
      '2' => 'Cleveland',
      '3' => 'Toledo'
    ),
    '2' => array(
      '4' => 'New York City',
      '5' => 'Buffalo',
      '6' => 'Syracuse'
    ),
  );

  // refine as needed to fit your validation, if this is your use case
  if (isset($form_state['values']['state']['ohio']) && $form_state['values']['state']['ohio'] == 'ohio') {
    $form['rate_the_service']['city'] = array(
      '#prefix'=>'<div id="checkboxes-four-replace">',
      '#type' => 'checkboxes',
      '#options' => $city_array[1],
      '#default_value' => isset($values['city']) ? $values['city'] : array('1'),
      '#suffix'=>'</div></div>',
    );
  } else if (isset($form_state['values']['state']['new_york']) && $form_state['values']['state']['new_york'] == 'new_york') {
    $form['rate_the_service']['city'] = array(
      '#prefix'=>'<div id="checkboxes-four-replace">',
      '#type' => 'checkboxes',
      '#options' => $city_array[2],
      '#default_value' => isset($values['city']) ? $values['city'] : array('2'),
      '#suffix'=>'</div></div>',
    );
  } else {
    $form['rate_the_service']['city'] = array(
      '#prefix'=>'<div id="checkboxes-four-replace">',
      '#type' => 'checkboxes',
      '#options' => array(),
      '#default_value' => isset($values['city']) ? $values['city'] : array('2'),
      '#suffix'=>'</div></div>',
    );
  }
  return $form;
}

/**
 * Ajax Callback for development_form
 */
function ajax_example_dependent_dcheck_state_callback($form, $form_state) {
  return $form['rate_the_service']['city'];
}

and here is the case with states as a 'select' box and cities as a 'select' box

function state_form($form, &$form_state) {
  $form = array();

  $form['rate_the_service']['state'] = array(
    '#type' => 'select',
    '#prefix'=>'<div id="dropdown-third-replace">',
    '#suffix'=>'</div>',
    '#options'=>array(
      'ohio' => t('Ohio'),
      'new_york' => t('New York'),
    ),
    '#validated' => TRUE,
    '#ajax' => array(
      'event' => 'change',
      'callback' => 'ajax_example_dependent_dcheck_state_callback',
      'wrapper' => 'checkboxes-four-replace',
    ),
  );

  $city_array = array(
    '1' => array(
      '1' => 'Cincinnati',
      '2' => 'Cleveland',
      '3' => 'Toledo'
    ),
    '2' => array(
      '4' => 'New York City',
      '5' => 'Buffalo',
      '6' => 'Syracuse'
    ),
  );

  if (isset($form_state['values']['state']) && $form_state['values']['state'] == 'new_york') {
    $form['rate_the_service']['city'] = array(
      '#prefix'=>'<div id="checkboxes-four-replace">',
      '#type' => 'select',
      '#options' => $city_array[2],
      '#default_value' => isset($values['city']) ? $values['city'] : array('1'),
      '#suffix'=>'</div></div>',
    );
  } else {
    $form['rate_the_service']['city'] = array(
      '#prefix'=>'<div id="checkboxes-four-replace">',
      '#type' => 'select',
      '#options' => $city_array[1],
      '#default_value' => isset($values['city']) ? $values['city'] : array('2'),
      '#suffix'=>'</div></div>',
    );
  }
  return $form;
}

/**
 * Ajax Callback for development_form
 */
function ajax_example_dependent_dcheck_state_callback($form, $form_state) {
  return $form['rate_the_service']['city'];
}