Modal form opened from modal form doesn't submit

liquidcms

8/3/24, 9:36 PM

I have a user form mode (like node view mode except for forms) opened in a modal. When this form is submitted the user entity is updated and the modal is closed. This works fine. I now want to extend this where the user is updated, the modal is closed and a 2nd modal is opened with another custom form.

In my original AJAX response call I have simply added this:

  // Get the modal form using the form builder.
  $accept_form = \Drupal::formBuilder()->getForm('Drupal\sia_mpep\Form\SendPolicyEndorsementForm');

  // Add an AJAX command to open a modal dialog with the form as the content.
  $response->addCommand(new OpenModalDialogCommand(t('Send policy endorsement form'), $accept_form, ['width' => '1000']));

The custom form is fairly simple and has this at the end:

$form['actions'] = ['#type' => 'actions'];
$form['actions']['send'] = [
  '#type' => 'submit',
  '#value' => $this->t('Send'),
  '#attributes' => [
    'class' => [
      'use-ajax',
    ],
  ],
  '#ajax' => [
    'callback' => [$this, 'submitModalFormAjax'],
  ],
];

$form['#attached']['library'][] = 'core/drupal.dialog.ajax';

return $form;

but when I submit the 2nd form; neither the submitForm nor the submitModalFormAjax methods are hit. I noticed that the action attribute in the form tag is still set to the original user form edit (modal #1) and I read that I need to define a route to my new form and set #action to the new route:

$form['#action'] = \Drupal\Core\Url::fromRoute('route_to_my_form')->toString();

This does set the action in my form tag to point to that path; but still doesn't submit to my submitForm() handler. It also has the downside of now having a page which shows my form - which I don't need.

When I submit the ajax spinner spins for a while and then I get an AJAX error in console which looks as though the form may still be submitting to the user form handler.

I am guessing there must be something simple missing here.

1 + 0

forms

modal-dialogs

Score:1

Drupal

No Sssweat

8/11/24, 6:49 AM

This is a gotcha of AJAX forms.

When you load an AJAX form via AJAX it loses its AJAX functionality.

In order to keep it working, for the form that is getting loaded via ajax, you need to add a url and options keys to #ajax

  '#ajax' => [
    'callback' => [$this, 'submitModalFormAjax'],
    'url' => \Drupal\Core\Url::fromRoute('your.form.route.name'),
    'options' => [
      'query' => [
        Drupal\Core\Form\FormBuilderInterface::AJAX_FORM_REQUEST => TRUE,
      ],
    ],
  ],

+ 1

liquidcms

8/11/24, 10:03 PM

Excellent. Thank you.

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: Modal form opened from modal form doesn't submit

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.