I have a form with AJAX elements, generated as follows:

    $memberForm['members'] = [
      '#prefix' => '<div id="'.$id.'">',
      '#suffix' => '</div>',
    $form['members']['extra_flag1'] = [
      '#type' => 'checkbox',
      '#title' => $config->get('extras.flag1'),
      '#ajax' => array(
        'callback' => [$this, 'updateMemberOptionFields'],
        'event' => 'change',

(There are other fields displayed based on the current value of the checkbox).

My callback function looks like this:

  public function updateMemberOptionFields(array $form, FormStateInterface $form_state) {
    $ajax_response = new AjaxResponse();
    $ajax_response->addCommand(new HtmlCommand('#extra_flag1_1', render($form['members']['member1']['extra_flag1'])));

    return $ajax_response;

This works perfectly the first time the checkbox is clicked, but subsequent clicks have no effect.

I have other AJAX components that use the #wrapper property, and these work fine. However, this component will need to replace multiple sections in different parts of the form.

Is there a way the replacement elements can have AJAX callbacks?



  • 1
    I feel like this has to do with the form needing to be rebuilt. – Kevin Mar 30 '17 at 0:37
  • 1
    drupal.stackexchange.com/questions/188730/… – user21641 Mar 30 '17 at 6:47
  • That checklist is very helpful. I was able to use getTriggeringElement to find out which checkbox triggered the Ajax call, and that meant I only need to replace one part of the form, so I could change the form to only replace to part associated with the checkbox that was actually clicked. – James Shields Apr 9 '17 at 13:48

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.