0

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 ?

3
  • I'm not sure that you can have a submit handler in your field. If you want to change the value of the field when the form submit button you should apply it at your action. eg $form['actions']['submit']['#submit'][] = YOUR_SUMBIT_HANDLER. In your example the submit handler is also applied at the actions and not to the field. If you want to do something like autosave to the field check this link urbaninsight.com/article/… – Ismini Jan 12 '18 at 14:34
  • I don't have a submit handler on a field. It's on a #type => 'submit' element, just as in the example. – Eria Jan 12 '18 at 14:41
  • I still believe that you need to add the ['actions'] in order to define the actions of your form. – Ismini Jan 12 '18 at 14:54
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.