How to update multiple fields using ajax?

Question

In content type there are three field . Each field are node reference to different content. Here I want to restrict value and create dependency on these field. For example: I have one auto complete field "Country". On change of "Country", select list(i.e. State) field value is updated. On change of "State", "county" field is updated. Everything is working fine.

When I change value of "Country", "State" value get change But "county" value hold previous value. How should I achieve this. How should I reset value of county

My code snippet is like

function module_form_alter(&$form, &$form_state, $form_id) {
  $form['field_country'][LANGUAGE_NONE]['#ajax'] = array(
    'callback' => '_state_list_callback',
    'event'    => 'change',
    'wrapper' => 'state-list',
    'progress' => array('type' => 'throbber', 'message' =>  'Please wait...'),
);
  $form['field_country']['#prefix'] = '<div id="state-list">';
  $form['field_country']['#suffix'] = '</div>';

  $form['field_state'][LANGUAGE_NONE]['#ajax'] = array(
    'callback' => '_county_list_callback',
    'event'    => 'change',
    'wrapper' => 'county-list',
    'progress' => array('type' => 'throbber', 'message' =>  'Please wait...'),
);
  $form['field_county']['#prefix'] = '<div id="county-list">';
  $form['field_county']['#suffix'] = '</div>';
}


function _county_list_callback(&$form, &$form_state) {
  return $form['field_county'];
}

function _state_list_callback(&$form, &$form_state) {
  return $form['field_state'];
}

Answer 1

You can use ajax_command_replace() when replacing more than one element/field. Check this ans. The answer says as:

Instead of returning the HTML of the single element to update, your ajax callback can return an array of ajax commands. So it can return two ajax_command_replace to replace each element.

Answer 2

It seems to me that the wrapper is the issue.

To create an Ajax-enabled form, you:

Mark a form element as an Ajax-enabled using the #ajax property. This form element will now trigger a background Ajax call when it is changed or clicked. The #ajax['wrapper'] property includes the HTML ID of a page section that should be replaced (or altered in some other way). The #ajax['callback'] tells the Form system what callback should be called after the Ajax call happens and the form is rebuilt.

https://www.drupal.org/docs/7/api/javascript-api/ajax-forms-in-drupal-7

I suggest creating a wrapper around country and state fields and referencing the wrapper'id in the ajax as follows:

function module_form_alter(&$form, &$form_state, $form_id) {

    $form['wrapper']    = array(
        '#type' => 'markup',
        '#markup' => "<div id='wrapped-elements'>", 
    );

    $form['field_country'][LANGUAGE_NONE]['#ajax'] = array(
        'callback' => '_state_list_callback',
        'event'    => 'change',
        'wrapper' => 'wrapped-elements',
        'progress' => array('type' => 'throbber', 'message' =>  'Please wait...'),
    );
    $form['field_country']['#prefix'] = '<div id="state-list">';
    $form['field_country']['#suffix'] = '</div>';

    $form['field_state'][LANGUAGE_NONE]['#ajax'] = array(
        'callback' => '_county_list_callback',
        'event'    => 'change',
        'wrapper' => 'wrapped-elements',
        'progress' => array('type' => 'throbber', 'message' =>  'Please wait...'),
    );
    $form['field_county']['#prefix'] = '<div id="county-list">';
    $form['field_county']['#suffix'] = '</div>';

    $form['wrapper_close'] = array(
        '#type' => 'markup',
        '#markup' => '</div>', 
    )
}

function _county_list_callback(&$form, &$form_state) {
    return $form;
}

function _state_list_callback(&$form, &$form_state) {
    return $form;
}

Answer 3

You can create a form container element, add both county and state to that container. Add your wrapper id to the container, and then replace the container in your callback function.