Problem with submitting ajax form with autocomplete

Question

I've been a newbie to drupal and trying to add feature to our corporate website (this module called 'userpasswords2' searches database of local mailsystem passwords). I'm using AJAX autocomplete and modification of the form.

AJAX autocomplete works fine, I can choose the user but I have a problem - I cannot submit the form by enter key. If I submit it by hittin 'submit' button by mouse, everything works fine. But I cannot submit it from keyboard.

I would like it to work like here https://api.drupal.org/api/drupal - user enters for example 'hook', chooses what he/she needs, hits enter, then hits enter again and get the result!

So again - clicking submit button works fine, hitting 'enter' key doesn't work.

Googled a lot, the workarounds I've found doesn't work for me. Please help.

function userpasswords2_menu() {
  $items = array();
  $items['userpasswords2'] = array(
      'title' => 'User passwords',
      'page callback' => 'drupal_get_form',
      'page arguments' => array('userpasswords2_form'),
      'access callback' => TRUE,
      'type' => MENU_CALLBACK,
  );
  $items['userpasswords2/ajax_username_autocomplete_callback2'] = array(
      'page callback' => 'ajax_username_autocomplete_callback2',
      'type' => MENU_CALLBACK,
      'access callback' => TRUE,
  );
  return $items;
}

function userpasswords2_form($form, &$form_state) {
  $form = array();
  $form['user'] = array(
      '#type' => 'textfield',
      '#title' => t('Введите имя пользователя'),
      '#autocomplete_path' => 'userpasswords2/ajax_username_autocomplete_callback2',
      '#executes_submit_callback' => 'TRUE',
  );
  $form['box'] = array(
    '#type' => 'markup',
    '#prefix' => '<div id="box">',
    '#suffix' => '</div>',
    '#markup' => '<br>',
  );
  $form['actions']['submit'] = array(
    '#type' => 'submit',
    '#ajax' => array(
      'callback' => 'userpasswords2_callback',
      'wrapper' => 'box',
    ),
    '#value' => t('Submit'),
  );
  return $form;

}

function ajax_username_autocomplete_callback2($string = "") {
  $matches = array();
  if ($string) {
    $result = db_select('my_domain_passwords')
      ->fields('my_domain_passwords',array('fullname','password'))
      ->condition('fullname', db_like($string) . '%', 'LIKE')
      ->range(0,10)
      ->execute();
    foreach ($result as $user) {
      $form['custom']['username'] = $matches[$user->fullname] = check_plain($user->fullname);
      $form['custom']['password'] = check_plain($user->password);
    }
  }
  drupal_json_output($matches);
}


function userpasswords2_form($form, &$form_state) {
$form = array();
$form['user'] = array(
    '#type' => 'textfield',
    '#title' => t('Введите имя пользователя'),
    '#autocomplete_path' => 'userpasswords2/ajax_username_autocomplete_callback2',
    '#executes_submit_callback' => 'TRUE',
);

$form['box'] = array(
  '#type' => 'markup',
  '#prefix' => '<div id="box">',
  '#suffix' => '</div>',
  '#markup' => '<br>',
);
$form['actions']['submit'] = array(
  '#type' => 'submit',
  '#ajax' => array(
    'callback' => 'userpasswords2_callback',
    'wrapper' => 'box',
  ),
  '#value' => t('Submit'),
);
return $form;
}

function userpasswords2_callback($form, &$form_state) {
  if ( (!empty($form_state['custom']['username'])) && (!empty($form_state['custom']['password'])) ) {
    $output_string = $form_state['custom']['username'] . " : " . $form_state['custom']['password'];
  } else {
    $output_string = "No such user: " . $form_state['values']['user'];
  }
  $username = $form_state['custom']['username'];
  $password = $form_state['custom']['password'];
  $element = $form['box'];
  $element['#markup'] = $output_string;
  return $element;
}

Answer 1

I think you need to do this:

$form['actions']['submit'] = array(
    '#type' => 'submit',
    '#ajax' => array(
      'callback' => 'userpasswords2_callback',
      'wrapper' => 'box',
      'event' => 'click'
    ),
    '#value' => t('Submit'),
  );

just add 'event' => 'click' you your submit ajax element in the form. This must be done for all forms you want to be submitted through #ajax.

Answer 2

If you remove your autocomplete, you can be able to submit by press enter. So the issue is in the autocomplete function. You need to patch the misc/autocomplte.js. Following is the patch, check out the link for more details.

case 13: // Enter.
case 27: // Esc.
    this.hidePopup(e.keyCode);
    if (e.keyCode == 13 && $(input).hasClass('auto_submit')) {
       input.form.submit();
    }

This could be help you https://www.drupal.org/project/drupal/issues/309088