How does the #submit property works with #ajax?

Question

I'm having trouble understanding how works the #submit property of a submit element in Drupal 8, when Ajax is used.

I found this code, as an example of how to implement ajax buttons which add or remove items to/from a form : https://gist.github.com/leymannx/72d41cf0baa4dee62d6ddc89bc7c7a5a

The "add item" submit button in the form is described by the code below :

$form['container']['actions']['add_item'] = [
  '#type'   => 'submit',
  '#value'  => $this->t('Add another name'),
  '#submit' => ['::MYMODULE_MYFORM_add_item'],
  '#ajax'   => [
    // Could also use [ $this, 'colorCallback'].
    'callback' => '::MYMODULE_MYFORM_ajax_callback',
    'wrapper'  => 'my-container', // CHECK THIS ID
  ],
];

There are 2 callback functions used here : the value of the #submit property and the value of callback in the #ajax property.

What happens exactly when the user clicks on the button ? As I understand it, MYMODULE_MYFORM_add_item function is first called, then MYMODULE_MYFORM_ajax_callback function.

But, in a custom module, I'm currently doing something like this :

// Implementation of hook_form_FORM_ID_alter(), to customize the user register form
function mymodule_form_user_register_form_alter(&$form, FormStateInterface $form_state, $form_id) {

    // Add a "Fill username" button
    $form['account']['fill_username'] = array(
        '#type' => 'submit',
        '#value' => t('Fill username with Bob'),
        '#weight' => -1,
        '#submit' => ['mymodule_fill_username_submit'],
        '#ajax' => array(
            'callback' => 'mymodule_fill_username_callback',
            'wrapper' => 'edit-account'
        )
    );
}

// #submit function of the button
function mymodule_fill_username_submit( $form, FormStateInterface &$form_state ){
    \Drupal::logger('mymodule')->notice('mymodule_fill_username_submit');
    $form_state->setValue('name', 'Bob');
    $form_state->setRebuild( true );
}

// callback function of the button
function mymodule_fill_username_callback( $form, FormStateInterface &$form_state ){
    \Drupal::logger('mymodule')->notice('mymodule_fill_username_callback');
    return $form['account'];
}

The aim is to inject a value in the "Username" field, just to try and understand how this works.

As I click on the button, mymodule_fill_username_callback is called (I see the log) but mymodule_fill_username_submit never. And, of course, the field is not filled at all...

I don't understand what happens here. Nor how it's supposed to work.

Can anybody help ?

Answer 1

I don't think its good idea to handle form submission using the submit_form function in case of AJAX form. All the form submission logic should be handled in AJAX callback only. https://drupalabc.xyz/question/how-handle-form-submission-using-ajax-drupal-8

The following link has a running example of AJAX form submission in Drupal 8. I hope this helps. Thanks.