Can't set options on form ajax callback

Question

I have created a custom form in a custom page in the admin of my Drupal 7 site. On this form I have two sets of radio buttons (cities and sectors). I want it so that when I change the cities radio selection, the sector radio values swap to my new set values.

I have the following code in the main form declaration which initially sets up the form.

$form['module']['cities'] = array(
    '#type' => 'radios',
    '#title' => t('City'),
    '#ajax' => array(
        'event' => 'change',
        'wrapper' => 'sector-wrapper',
        'callback' => 'module_field_city_change_ajax_callback',
        'method' => 'replace',
    ),
    '#options' => array("1" => "New York", "2" => "Moscow"),
    '#required' => TRUE,
);

$form['module']['sectors'] = array(
    '#type' => 'radios',
    '#title' => t('Sectors'),
    '#prefix' => '<div id="sector-wrapper">',
    '#suffix' => '</div>',
    '#options' => array("Sport"=>"Sport", "Media"=>"Media"),
    '#required' => TRUE,
);

This creates forms. You can see I've added a callback 'module_field_city_change_ajax_callback'. The code for the callback is as follows:

function module_field_city_change_ajax_callback($form, $form_state){
    $form['module']['sectors'] = array(
        '#type' => 'radios',
        '#title' => t('Sectors'),
        '#prefix' => '<div id="sector-wrapper">',
        '#suffix' => '</div>',
        '#options' => array ('Aerospace' => 'Aerospace', 'Art' => 'Art' ),
        '#description' => t('Some text to show the div was updated?'),
        '#required' => TRUE,
    );
    return $form['module']['sectors'];
)

It almost works. The old sectors are updated with the new form element apart from one major part - the actual radio buttons (#options). I know the div has updated and the form rendered because it has the text 'Some text to show the div was updated?' injected. However there are just no values to click.

Any ideas?

Answer 1

I recently answered a question similar to this over at stack.

Basically, you should be doing all the form building and manipulation in the form builder function. The ajax callback function in your case should just return the form element.

This is because when the ajax is fired, just before the ajax callback function is executed, the form is rebuilt and the form building function is executed again (this time with a different form_state which will include the ajax elements current state)(I think).

So you would have something similar to:

$form['module']['cities'] = array(
    '#type' => 'radios',
    '#title' => t('City'),
    '#ajax' => array(
        'event' => 'change',
        'wrapper' => 'sector-wrapper',
        'callback' => 'module_field_city_change_ajax_callback',
        'method' => 'replace',
    ),
    '#options' => array("1" => "New York", "2" => "Moscow"),
    '#required' => TRUE,
);

  // Check if a city is selected and set sectors
  //something like this.

  // $sectors = array("Sport"=>"Sport", "Media"=>"Media");
  // if(city is selected){
  //   $sectors = array ('Aerospace' => 'Aerospace', 'Art' => 'Art' );
  // }

  // you should be able to check if a vocabulary is selected by checking the
  // $form_state['values'] or $form_state['input'] (I forget which)

$form['module']['sectors'] = array(
    '#type' => 'radios',
    '#title' => t('Sectors'),
    '#prefix' => '<div id="sector-wrapper">',
    '#suffix' => '</div>',
    '#options' => $sectors,
    '#required' => TRUE,
);

ajax callback

function module_field_city_change_ajax_callback($form, $form_state){
    return $form['module']['sectors'];
)