Prevent users from submitting a form by hitting Enter

Question

I have a survey on a website  and there seems to be some issues with the users hitting enter  I don t know why  and accidentally submitting the survey  form  without clicking the submit button  Is there a way to prevent this     I m using HTML  PHP 5 2 9  and jQuery on the survey

User · Answer

There are many good answers here already, I just want to contribute something from a UX perspective. Keyboard controls in forms are very important.

The question is how to disable from submission on keypress Enter. Not how to ignore Enter in an entire application. So consider attaching the handler to a form element, not the window.

Disabling Enter for form submission should still allow the following:

Form submission via Enter when submit button is focused.
Form submission when all fields are populated.
Interaction with non-submit buttons via Enter.

This is just boilerplate but it follows all three conditions.

_x000D_

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type');
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

_x000D_

User · Answer

You can use a method such as    document  ready function         window  keydown function event       if event keyCode    13          event preventDefault          return false                    In reading the comments on the original post  to make it more usable and allow people to press Enter if they have completed all the fields   function validationFunction          input   each function                    if good        return true        return false       document  ready function         window  keydown function event       if   event keyCode    13   amp  amp   validationFunction      false            event preventDefault          return false

User · Answer

I think it s well covered with all the answers  but if you are using a button with some JavaScript validation code you could just set the form s onkeypress for Enter to call your submit as expected    lt form method  POST  action       onkeypress  if event keyCode    13  mySubmitFunction this   return false   gt    The onkeypress JS could be whatever you need to do  There s no need for a larger  global change  This is especially true if you re not the one coding the app from scratch  and you ve been brought into fix someone else s web site without tearing it apart and re-testing it

User · Answer

Use     document  on  keyup keypress    form input type  text     function e      if e keyCode    13        e preventDefault        return false            This solution works on all forms on a website  also on forms inserted with Ajax   preventing only Enters in input texts  Place it in a document ready function  and forget this problem for a life

User · Answer

A nice simple little jQuery solution      form   bind  keypress   function  e        if  e keyCode    13            return false

User · Answer

ONLY BLOCK SUBMIT but not other  important functionality of enter key  such as creating a new paragraph in a  lt textarea gt     x000D   x000D  window addEventListener  keydown   function event    x000D      set default value for variable that will hold the status of keypress x000D    pressedEnter   false  x000D   x000D      if user pressed enter  set the variable to true x000D    if  event keyCode    13  x000D      pressedEnter   true  x000D   x000D      we want forms to disable submit for a tenth of a second only x000D    setTimeout function     x000D      pressedEnter   false  x000D       100  x000D   x000D     x000D   x000D    find all forms x000D  var forms   document getElementsByTagName  form   x000D   x000D    loop through forms x000D  for  i   0  i  lt  forms length  i      x000D      listen to submit event x000D    forms i  addEventListener  submit   function e    x000D        if user just pressed enter  stop the submit event x000D      if  pressedEnter    true    x000D        updateLog  Form prevented from submit    x000D        e preventDefault    x000D        return false  x000D        x000D   x000D      updateLog  Form submitted    x000D       x000D    x000D   x000D  var log   document getElementById  log   x000D  updateLog   function msg    x000D    log innerText   msg x000D    x000D  input  x000D  textarea   x000D    display  inline-block  x000D    margin-bottom  1em  x000D    border  1px solid  6f6f6f  x000D    padding  5px  x000D    border-radius  2px  x000D    width  90   x000D    font-size  14px  x000D    x000D   x000D  input type submit    x000D    background  lightblue  x000D    color   fff  x000D    x000D   lt form gt  x000D     lt p gt Sample textarea  try enter key   lt  p gt  x000D     lt textarea rows  4  gt Hit enter  a new line will be added  But the form won t submit lt  textarea gt  lt br  gt  x000D     lt p gt Sample textfield  try enter key   lt  p gt  x000D     lt input type  text  placeholder      gt  x000D     lt br  gt  x000D     lt input type  submit  value  Save    gt  x000D     lt h3 id  log  gt  lt  h3 gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

I had a similiar problem  where I had a grid with  ajax textfields   Yii CGridView  and just one submit button  Everytime I did a search on a textfield and hit enter the form submitted  I had to do something with the button because it was the only common button between the views  MVC pattern   All I had to do was remove type  submit  and put onclick  document forms 0  submit

User · Answer

This works for me   jQuery each     your form id   find  input    function          this  bind  keypress keydown keyup   function e          if e keyCode    13    e preventDefault

User · Answer

Disallow enter key anywhere  If you don t have a  lt textarea gt  in your form  then just add the following to your  lt form gt     lt form     onkeydown  return event key     Enter    gt    Or with jQuery     document  on  keydown    form   function event         return event key     Enter         This will cause that every key press inside the form will be checked on the key  If it is not Enter  then it will return true and anything continue as usual  If it is Enter  then it will return false and anything will stop immediately  so the form won t be submitted   The keydown event is preferred over keyup as the keyup is too late to block form submit  Historically there was also the keypress  but this is deprecated  as is the KeyboardEvent keyCode  You should use KeyboardEvent key instead which returns the name of the key being pressed  When Enter is checked  then this would check 13  normal enter  as well as 108  numpad enter    Note that   window  as suggested in some other answers instead of   document  doesn t work for keydown keyup in IE lt  8  so that s not a good choice if you re like to cover those poor users as well   Allow enter key on textareas only  If you have a  lt textarea gt  in your form  which of course should accept the Enter key   then add the keydown handler to every individual input element which isn t a  lt textarea gt      lt input     onkeydown  return event key     Enter    gt   lt select     onkeydown  return event key     Enter    gt        To reduce boilerplate  this is better to be done with jQuery     document  on  keydown     input not textarea    function event        return event key     Enter         If you have other event handler functions attached on those input elements  which you d also like to invoke on enter key for some reason  then only prevent event s default behavior instead of returning false  so it can properly propagate to other handlers     document  on  keydown     input not textarea    function event        if  event key     Enter             event preventDefault                Allow enter key on textareas and submit buttons only  If you d like to allow enter key on submit buttons  lt input button type  submit  gt  too  then you can always refine the selector as below     document  on  keydown     input not textarea  not  submit    function event                     Note that input type text  as suggested in some other answers doesn t cover those HTML5 non-text inputs  so that s not a good selector

User · Answer

This is the perfect way  You will be not redirected from your page     form input   keydown function  e    if  e keyCode    13        e preventDefault        return false

User · Answer

You can also use javascript void 0  to prevent form submission    lt form action  javascript void 0   method  post  gt       lt label for    gt Search lt  label gt       lt input type  text  gt       lt button type  sybmit  gt Submit lt  button gt   lt  form gt     x000D   x000D   lt form action  javascript void 0   method  post  gt  x000D       lt label for    gt Search lt  label gt  x000D       lt input type  text  gt  x000D       lt button type  sybmit  gt Submit lt  button gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Something I have not seen answered here  when you tab through the elements on the page  pressing Enter when you get to the submit button will trigger the onsubmit handler on the form  but it will record the event as a MouseEvent  Here is my short solution to cover most bases   This is not a jQuery-related answer  HTML   lt form onsubmit  return false   method post gt     lt input type  text    gt  lt br   gt     lt input type  button  onclick  this form submit    value  submit via mouse or keyboard    gt     lt input type  button  onclick  submitMouseOnly event   value  submit via mouse only    gt   lt  form gt    JavaScript  window submitMouseOnly function evt       let allow  evt instanceof MouseEvent   amp  amp  evt x gt 0  amp  amp  evt y gt 0  amp  amp  evt screenX  gt  0  amp  amp  evt screenY  gt  0      if allow  evt tagName   FORM  evt target evt target form  submit        To find a working example  https   jsfiddle net nemesarial 6rhogva2

User · Answer

In my specific case I had to stop ENTER from submitting the form and also simulate the clicking of the submit button  This is because the submit button had a click handler on it because we were within a modal window  inherited old code   In any case here s my combo solutions for this case          input select   keypress function event               detect ENTER key         if  event keyCode    13                   simulate submit button click                 btn-submit   click                   stop form from submitting via ENTER key press             event preventDefault   event preventDefault     event returnValue   false                      This use case is specifically useful for people working with IE8

User · Answer

document  on  keydown   form   function event       node   event target nodeName toLowerCase       type     event target  prop  type   toLowerCase        if node   textarea   amp  amp  type   submit   amp  amp   event keyCode    13    event keyCode    169                event preventDefault            return false              It works perfectly

User · Answer

Using Javascript  without checking any input field     lt script gt  window addEventListener  keydown   function e        if  e keyIdentifier     U 000A     e keyIdentifier     Enter     e keyCode    13            e preventDefault            return false           true    lt  script gt    If someone wants to apply this on specific fields  for example input type text    lt script gt  window addEventListener  keydown   function e        if  e keyIdentifier     U 000A     e keyIdentifier     Enter     e keyCode    13            if  e target nodeName     INPUT   amp  amp  e target type     text                 e preventDefault                return false                     true    lt  script gt    This works well in my case

User · Answer

I can t comment yet  so I ll post a new answer  Accepted answer is ok-ish  but it wasn t stopping submit on numpad enter  At least in current version of Chrome  I had to alter the keycode condition to this  then it works   if event keyCode    13    event keyCode    169

User · Answer

Not putting a submit button could do  Just put a script to the input  type button  or add eventListener if you want it to submit the data in the form   Rather use this   lt input type  button  gt    than using this   lt input type  submit  gt

User · Answer

In my case I had a couple of jQuery UI autocomplete fields and textareas in a form  so I definitely wanted them to accept Enter  So I removed the type  submit  input from a form and added an anchor  lt a href    id  btn  gt Ok lt  a gt  instead  Then I styled it as a button and added the following code        btn    click  function  event        event preventDefault        if   validateData                  form frm    append    lt input type  submit  id  frm-submit  style  display none   gt  lt  input gt              setTimeout  function         frm-submit    click       500              return false        If a user fills all required fields  validateData   succeeds and the form submits

User · Answer

I needed to prevent only specific inputs from submitting  so I used a class selector  to let this be a  global  feature wherever I need it    lt input id  txtEmail  name  txtEmail  class  idNoEnter         gt    And this jQuery code       idNoEnter   keydown function  e      if  e keyCode    13        e preventDefault              Alternatively  if keydown is insufficient       idNoEnter   on  keypress keydown keyup   function  e       if  e keyCode    13         e preventDefault               Some notes   Modifying various good answers here  the Enter key seems to work for keydown on all the browsers  For the alternative  I updated bind   to the on   method   I m a big fan of class selectors  weighing all the pros and cons and performance discussions  My naming convention is  idSomething  to indicate jQuery is using it as an id  to separate it from CSS styling

User · Answer

It is my solution to reach the goal  it is clean and effective      form   submit function        if    document activeElement  attr  type       submit        return true    else return false

User · Answer

Do not use type  submit  for inputs or buttons  Use type  button  and use js  Jquery angular etc  to submit form to server

User · Answer

Section 4 10 22 2 Implicit submission of the W3C HTML5 spec says      A form element s default button is the first submit button in tree order whose form owner is that form element       If the user agent supports letting the user submit a form implicitly  for example  on some platforms hitting the  enter  key while a text field is focused implicitly submits the form   then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button            Note  Consequently  if the default button is disabled  the form is not submitted when such an implicit submission mechanism is used   A button has no activation behavior when disabled        Therefore  a standards-compliant way to disable any implicit submission of the form is to place a disabled submit button as the first submit button in the form    lt form action       gt     lt  -- Prevent implicit submission of the form -- gt     lt button type  submit  disabled style  display  none  aria-hidden  true  gt  lt  button gt      lt  --     -- gt      lt button type  submit  gt Submit lt  button gt   lt  form gt    One nice feature of this approach is that it works without JavaScript  whether or not JavaScript is enabled  a standards-conforming web browser is required to prevent implicit form submission

User · Answer

I had to catch all three events related to pressing keys in order to prevent the form from being submitted       var preventSubmit   function event            if event keyCode    13                console log  caught ya                 event preventDefault                  event stopPropagation                return false                          search   keypress preventSubmit           search   keydown preventSubmit           search   keyup preventSubmit     You can combine all the above into a nice compact version           search   bind  keypress keydown keyup   function e          if e keyCode    13    e preventDefault

User · Answer

Giving the form an action of  javascript void 0    seems to do the trick   lt form action  javascript void 0    gt   lt input type  text    gt   lt  form gt   lt script gt    document  ready function           window  keydown function event           if event keyCode    13        alert  Hello                           lt  script gt

User · Answer

Instead of preventing users from pressing Enter  which may seem unnatural  you can leave the form as is and add some extra client-side validation  When the survey is not finished the result is not sent to the server and the user gets a nice message telling what needs to be finished to complete the form  If you are using jQuery  try the Validation plugin   http   docs jquery com Plugins Validation  This will require more work than catching the Enter button  but surely it will provide a richer user experience

User · Answer

This has worked for me in all browsers after much frustration with other solutions  The name space outer function is just to stay away from declaring globals  something I also recommend     function    window name space   new name space         jquery doc ready function name space         this is ie    navigator userAgent indexOf  MSIE       -1        this stifle   function event            event cancelBubble          event returnValue   false          if this is ie     false                event preventDefault                      return false             this on enter   function func            function catch key e                var enter   13              if  e                    var e   event                            keynum   GetKeyNum e               if  keynum     enter                    if func     undefined  amp  amp  func     null                        func                                      return name space stifle e                             return true     submit                    if  window Event                window captureEvents Event KEYDOWN               window onkeydown   catch key                    else               document onkeydown   catch key                     if name space is ie     false                document onkeypress   catch key                          Sample use     function         name space on enter          function     alert  hola

User · Answer

If you use a script to do the actual submit  then you can add  return false  line to the onsubmit handler like this    lt form onsubmit  return false   gt    Calling submit   on the form from JavaScript will not trigger the event

User · Answer

You could make a JavaScript method to check to see if the Enter key was hit  and if it is  to stop the submit    lt script type  text javascript  gt    function noenter       return   window event  amp  amp  window event keyCode    13      lt  script gt    Just call that on the submit method

User · Answer

Use      Validate your form using the jQuery onsubmit function    It ll really work       document  ready function          form  submit e          e preventDefault           if validation              document form1 submit                function validation           Your form checking goes here      lt form id  form1  method  POST  action    gt         Your form data  lt  form gt

User · Answer

I d like to add a little CoffeeScript code  not field tested      - gt        window  bind  keypress    event  - gt          if event keyCode    13             unless   TEXTAREA    SELECT   event originalEvent srcElement tagName                  event preventDefault      I hope you like the nice trick in the unless clause

User · Answer

Go into your css and add that to it then will automatically block the submission of your formular as long as you have submit input if you no longer want it you can delete it or type activate and deactivate instead    input disabled           background  gainsboro                input value  disabled           color  whitesmoke

User · Answer

A completely different approach    The first  lt button type  submit  gt  in the form will be activated on pressing Enter  This is true even if the button is hidden with style  display none  The script for that button can return false  which aborts the submission process  You can still have another  lt button type submit gt  to submit the form  Just return true to cascade the submission  Pressing Enter while the real submit button is focussed will activate the real submit button  Pressing Enter inside  lt textarea gt  or other form controls will behave as normal  Pressing Enter inside  lt input gt  form controls will trigger the first  lt button type submit gt   which returns false  and thus nothing happens    Thus    lt form action       gt     lt  -- insert this next line immediately after the  lt form gt  opening tag -- gt     lt button type submit onclick  return false   style  display none   gt  lt  button gt      lt  -- everything else follows as normal -- gt     lt  --     -- gt     lt button type submit gt Submit lt  button gt   lt  form gt

[jquery] Prevent users from submitting a form by hitting Enter

Examples related to jquery

Examples related to html

Examples related to forms

Examples related to form-submit