0

In a custom module, I have a form with a simple submit button:

$form['submit'] = [
  '#type'   => 'submit',
  '#value'  => $this->t('Submit'),
];

As the execution of the code in submitForm may last for a while, I'd like to add a throbber to this button.
So I updated the code to:

$form['submit'] = [
  '#type'  => 'submit',
  '#value' => $this->t('Submit'),
  '#ajax'  => [
    'callback' => '::ajaxCallback',
    'progress' => [
      'type'    => 'throbber',
      'message' => $this->t('Be patient'),
    ],
  ],
];

and in my ajaxCallback, I have nothing as I just want the throbber to be displayed during the execution of the submitForm.
When I click the submit button, I get the throbber but no more validation of the form (validateForm) nor execution of the submitForm.
What am I doing wrong?

[Edit] I added

$form['#prefix'] = '<div id="my_form_wrapper">';
$form['#suffix'] = '</div>';

and updated $form['submit']accordingly

  '#ajax'  => [
    'wrapper'  => 'my_form_wrapper',
    'callback' => '::ajaxCallback',
    'progress' => [
      'type'    => 'throbber',
      'message' => $this->t('Be patient'),
    ],

and now it works!

But it adds another issue:
It breaks the default location of the messages (information, warning, error).
Now they are within the wrapper :-( enter image description here I tried with different themes and I have the same result.
Any idea why and how I can fix that?

7
  • 1
    Does this answer your question? How can I programatically add the default AJAX throbber to a form submit?
    – sonfd
    Feb 1, 2021 at 19:14
  • The answer to that question suggests you should return $form; in your callback.
    – sonfd
    Feb 1, 2021 at 19:15
  • No, it doesn't (by the way, I had read that post). And, yes, I tried with return $form; with no difference.
    – gbmapo
    Feb 1, 2021 at 20:00
  • I missed something: now I have added $form['#prefix'] = '<div id="my_form_wrapper">'; and $form['#suffix'] = '</div>'; it works. But it brings new issues (see how I edited my question).
    – gbmapo
    Feb 2, 2021 at 7:23
  • 1
    Please ask a new question then.
    – leymannx
    Feb 2, 2021 at 14:25

0

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.