0

First off, I am not a Javascript guru so this may be easy to acccomplish but I just don't know how.

Here is my situation: I have created a form in Drupal 7 and I have two dropdown select box in that form. I would like to change the possible selections in the second dropdown based upon what the user has selected in the first drop down.

Is there a way to add a change listener in Drupal so as to trigger an ajax update of the form?

Thanks.

2

You can create it with built-in Ajax Framework (you don't need to use javascript). Here is a nice example (and I'll include the code here):

function sandbox_ajax_dropdown($form, &$form_state) {
  $form['sandbox_ajax_dropdown']['province'] = array(
    '#title' => t('Province'),
    '#type' => 'select',
    '#options' => _load_province(),
    '#ajax' => array(
      'event'=>'change',
      'callback' =>'sandbox_ajax_dropdown_city',
      'wrapper' => 'city-wrapper',
    ),
  );

 $form['sandbox_ajax_dropdown']['wrapper'] = array(
    '#prefix' => '<div id="city-wrapper">',
    '#suffix' => '</div>',
  );

  $options = array('- Select city -');
  if (isset($form_state['values']['province'])) {
    $options = _load_city($form_state['values']['province']);
  }

  $form['sandbox_ajax_dropdown']['wrapper']['city'] = array(
    '#title' => t('City'),
    '#type' => 'select',
    '#options' => $options,
  );

  $form["sandbox_ajax_dropdown"]["submit"] = array(
    "#value"  => t("Submit"),
    "#type"   => "submit",
    "#submit" => array("sandbox_ajax_dropdown_submit"),
  );

  return $form;
}

function sandbox_ajax_dropdown_city($form, $form_state) {
  return $form['sandbox_ajax_dropdown']['wrapper'];
}


function sandbox_ajax_dropdown_city($form, $form_state) {
  return $form['sandbox_ajax_dropdown']['wrapper'];
}

function _load_province() {
  $province = array('- Select province -');
  $query = db_select("sandbox_province", "a");
  $query->fields("a", array('id', 'name'));
  $query->condition("a.status", 1);
  $query->orderBy("a.name");
  $result = $query->execute();

  while($row = $result->fetchObject()){
    $province[$row->id] = $row->name;
  }

  return $province;
}

function _load_city($province_id) {
  $city = array('- Select city -');
  $query = db_select("sandbox_city", "a");
  $query->fields("a", array('id', 'name'));
  $query->condition("a.status", 1);
  $query->condition("a.province_id", $province_id);
  $query->orderBy("a.name");
  $result = $query->execute();

  while($row = $result->fetchObject()){
    $city[$row->id] = $row->name;
  }

  return $city;
}

And also take a look at Examples module.

  • Thanks, that helped out alot! Very good example as well. Thanks. – user5013 Jan 28 '14 at 21:45
  • @user5013 I am glad If I could help you – xurshid29 Jan 28 '14 at 21:51
  • very nice example – Lee Woodman Jul 21 '14 at 15:37
0

How to do this in Drupal 8? Above steps do not exactly work for Drupal 8. Also in my case the 2 select fields already exist (they were created in BaaseFieldDefinitions, so doing something like this:

$form['sandbox_ajax_dropdown']['wrapper']['city'] = array(
  '#title' => t('City'),
  '#type' => 'select',
  '#options' => $options,
);

doesnt work since the 'city' select already exists. My main issue is how to place the city select inside the target wrapper.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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