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, 2017 at 0:37
  • 1
    – user21641
    Mar 30, 2017 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. Apr 9, 2017 at 13:48


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.