Last updated January 14, 2012. Created on January 13, 2012.
Edited by Coupon Code Swap. Log in to edit this page.

See first comment for alternative method.

Users often submit forms by pressing the Enter key while the cursor is positioned in a text field. This is a convenient feature to quickly submit a form from the place of last edit (especially on forms that are very long) instead of having to scroll down to the Save button, position the mouse over it and click. An issue I ran into with Drupal 7 is that this is no longer working in node forms, because of the extensive use of Ajax. The Enter key is pressed after editing a text field and nothing happens. After searching quite a bit, I found a solution:

add the following function to template.php, clear cache and then test it out:

function YOURTHEME_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'YOURFORMID') {
      $form['YOURINPUTNAME']['#attributes']['onkeypress'][]='if(event.keyCode==13){this.form.submit();}';
  }
}

This can be enabled for multiple inputs. As an example, if you are using the Garland theme and want to add the abitilty to submit the node form by pressing Enter in both the "Title field" and the "Authored by" field for a content type "Page" the code would look like this:

function garland_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'page_node_form') {
      $form['title']['#attributes']['onkeypress'][]='if(event.keyCode==13){this.form.submit();}';
      $form['name']['#attributes']['onkeypress'][]='if(event.keyCode==13){this.form.submit();}';
  }
}

If someone knows a better way of doing this, please add it. Also, if there is a way to generate attributes for all inputs of a certain class in a form (i.e. all inputs with class "form-text") it would be helpful to list that.

The only issue I have come accross is that pressing Enter key to submit with this technique is not properly registered with the Content locking (anti-concurrent editing) optional module. You will receive a warning of you have "Use javascript to detect leaving the node form" enabled with that module.

Happy efficient form submitting :)

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Coupon Code Swap’s picture

I found another, perhaps better way to accomplish this. If you change the weight of the actions buttons so that they are above any Ajax items in the node form, pressing Enter to save the form works as expected. The other nice thing about this method is that it does not interfere with the Content locking module :)

Here's how:

function YOURTHEME_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'YOURFORMID') {
      $form['actions']['#weight']=-1;
  }
}

Adjust the weight as necassary. It would be nice if there is a way to print the actions buttons at both the top and bottom of form...

vgalindus’s picture

$form['actions']['submit']['#ajax'] = array(
'callback' => 'login_form_handler',
'wrapper' => 'errors',
'effect' => 'fade',
'event' => 'click'
);

just add 'event' => 'click' you your submit ajax element in the form.

Shabana Blackborder’s picture

Really simple, thanks!

Shabana Navas
Drupal Developer
http://blackborder.co.uk

phreestilr’s picture

Awesome tip, thanks!

prairiebean’s picture

enter = click on the Ajax works beautifully. Thanks!

DrCord’s picture

Thanks. Simply adding 'event' => 'click' to the ['submit']['#ajax'] array worked great.

waqariz’s picture

So glad to see so simple :)

WaQaR Ali

relaxpor’s picture

You save my life!

lmeurs’s picture

Manually adding scripts to separate fields is not very efficient and changing the event from mousedown to click might conflict with JS driven fields like autocomplete, see #634616: Various problems due to AJAX binding to mousedown instead of click and #216059: AHAH triggered by text input enter key press, breaks e.g. autocomplete.

My solution (in-the-make) is to stick with the mousedown event and attach the keypress event to all input fields but some. See comments in sample code beneath. This JS script (though formatted as PHP to improve readability) can be added to the page from anywhere and is supposed to fully work out of the box, but might need some alterations to suit your needs.

Any suggestions on enhancements are welcome!

<?php
/**
 * Drupal AJAX forms are submitted by the mousedown event instead of the click
 * event to make these forms work with form fields like autocomplete. The
 * downside is that forms are not submitted on an enter keypress. See
 * drupal.org/node/634616, drupal.org/node/216059 and drupal.org/node/1403614
 * for more information.
 *
 * This jQuery v1.7+ solution uses .on() to bind the keypress event to *all*
 * input fields that are in the DOM right now or inserted later and as long as
 * they do not have the following CSS classes:
 *  - .prevent-submit-on-enter
 *  - .form-autocomplete
 *
 * When the enter key is pressed on one of these fields, this script searches
 * for a submit button with the .submit-on-enter class to trigger the mousedown
 * event on, otherwise the first submit button is used.
 *
 * Posted at drupal.org/node/1403614#comment-8718725.
 */
jQuery(function($) {

  $(
document.body).on('keypress', 'input:not(.prevent-submit-on-enter, .form-autocomplete)', function(e) {
   
// If keypress enter.
   
if (e.keyCode == 13) {
     
// Get form as jQuery object.
     
var $form = $(this.form);

     
// If form has a button with the .submit-on-enter class.
     
if ($form.find('.submit-on-enter:first').length) {
       
// Trigger mousedown event on this button.
       
$form.find('.submit-on-enter:first').trigger('mousedown');
      }
      else {
       
// Trigger mousedown event on the first submit button in the form.
       
$form.find('[type="submit"]:first').trigger('mousedown');
      }
    }
  });

});
?>

Laurens Meurs
wiedes.nl