0

I have two select elements. one for a property and one for a category. When I select property it goes to a function through ajax and return an array to other select elements (category) #option. I need to do is, when I select a property, the category elements first option should be selected and trigger that elements on change event.

Form

public function buildForm(
    array $form, 
    FormStateInterface $form_state, 
    $properties = [],
    $categories = [],
    $propertyContent = [],
    $isCorporate = false,
    $propertyId = null
) { 
    $propertyKey = null;

    if (!empty($form_state->getValue('property'))) {
        $propertyKey = $form_state->getValue('property');
    } else {
        $propertyKey = key($properties);
    }

    $form['property'] = [
        '#type'          => 'select',
        '#id'            => 'property',
        '#attributes'    => ['class' => ['form-control']],
        '#title'         => $this->t('Hotel'),
        '#options'       => $properties,
        '#default_value' => $propertyKey,
        '#ajax'          => [
            'callback'  => 'create_category_list',
            'event'     => 'change',
            'wrapper'   => 'category-type',
            'method'    => 'html'
        ],
        '#required'  => true,
        '#validated' => true,
    ];

    $form['category'] = [
        '#type'         => 'select',
        '#id'           => 'category',
        '#attributes'   => ['class' => ['form-control']],
        '#title'        => $this->t('Category'),
        '#options'      => $categoryList,
        '#ajax'         => [
            'callback'  => 'show_gallery_ajax',
            'event'     => 'change',
            'wrapper'   => 'gallery-images',
            'method'    => 'html',
            'progress'  => [
                'type'    => 'throbber',
                'message' => t('Loading gallery !'),
            ],
        ],
        '#prefix'        => '<div id ="category-type">',
        '#suffix'        => '</div>',
        '#default_value' => $defaultCategory,
        '#required'      => false,
        '#validated'     => true,
    ];

    return $form;
}
  • 1
    See the color example from the example module cgit.drupalcode.org/examples/tree/form_api_example/src/Form/… – 4k4 Dec 22 '17 at 8:10
  • @4k4 that doesn't work for my requirement. As per the above example when I change the temperature I need to call a function from the color s onchange. – i am batman Dec 22 '17 at 11:16
  • You may try to attach a custom JS behavior to your form. JS behaviors will be triggered after initial page load AND after an ajax request completes. There you could manually trigger the change event or do whatever other initialization you requre after the second select has been updated. – Mario Steinitz Dec 22 '17 at 11:36
  • Alternatively you could update the select AND your gallery as response to the property change event. Would be even cleaner. – Mario Steinitz Dec 22 '17 at 11:40
  • @4k4 is the best solution for this, it helped me a lot – Sboniso Marcus Nzimande Oct 15 '18 at 14:33

Your Answer

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

Browse other questions tagged or ask your own question.