Problem with submitting ajax form with autocomplete

by Vlad   Last Updated January 09, 2018 07:07 AM

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;
}
Tags : 7 forms ajax


Answers 2


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.

Neo
Neo
October 07, 2013 09:14 AM

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

nanbatman
nanbatman
January 09, 2018 06:50 AM

Related Questions



Access Denied when Menu CallBack Function is Called

Updated April 20, 2015 06:03 AM