Selecting a car, then selecting tires based on which tires the car can have

Question

Sorry, I can't express my problem without having to abstract it into something simple, I hope gets my point across. It has also been pretty much impossible to search Google etc., for this particular issue as I can't properly formulate it.

Imagine a content type called "Order".

You go to create a new Order. Where you can choose a car, and tires for THAT car. The only tires you can choose, have been defined on the car itself, when it was created.

So if you choose a tiny car, the tractor wheels are not shown as a choice of tires. Because on that tiny car, the tractor wheels haven't been selected.

On the car node, there's a field_usable_tires, where you can select the different tires that car can use.

My problem is how to make the "tires" selection on the create Order form change, dependent on the tires the car can have, when a car is selected.

Really hope someone out there understands my issues and can help! :)

/Dan

Answer 1

Is tires a dropdown list on the order content type?

If so, I think you might just need to manipulate the states, https://api.drupal.org/api/examples/form_example%21form_example_states.inc/function/form_example_states_form/7.x-1.x

I haven't used this module in a long time, but it might work for you, https://www.drupal.org/project/conditional_fields

Answer 2

In similar situation, what I did, was to create an ajax callback on the field. I'm working on D8.

$form['field_name']['widget']['#ajax'] = array(
    'callback' => 'my_callback',
    'wrapper' => 'edit-field-organisation',
    'event' => 'change',
    'method' => 'replace',
    'effect' => 'fade',
  );

And in the callback I fetch the related content based on user selection. In my case I had to do with taxonomy terms. And replace the values in my second selectbox.

function my_callback($form, $form_state) {
  //Here get the selected value  
  $organisation_id = $form_state->getValue('field_organisation')[0]['target_id'];

  $option = '<option value="_none">- Select a value -</option>';
  if(!is_null($organisation_id)){
    $term = \Drupal::entityTypeManager()->getStorage('taxonomy_term')->load($organisation_id);
    $sector_list = $term->get('field_sector')->getValue('list');

    foreach ($sector_list as $key=>$item){
      $term = \Drupal::entityTypeManager()->getStorage('taxonomy_term')->load($item['target_id']);
      $option .= "<option value='" . $item['target_id'] . "'>" . $term->getName() . "</option>";
    }
  }
  $response = new AjaxResponse();

  $output = '<select data-drupal-selector="edit-field-sector" id="edit-field-sector" name="field_sector" class="form-select required" required="required" aria-required="true">' . $option . '</select>';
  $response->addCommand(new ReplaceCommand('#edit-field-sector', $output));

  return $response;

}

Maybe there is a better way to fetch the terms but this works.

Answer 3

Create two vocabulary 1> Car 2> Tires . Now add term relation in tires vocabulary and select car vocabulary.

Now when you create a order . onchange of car select call a AJAX behalf selected car tid get you tries related to you car and replace tries field option by that option .

Thanks