How to prevent ENTER keypress to submit a web form

Question

How do you prevent an ENTER key press from submitting a form in a web-based application

User · Answer

In my case  this jQuery JavaScript solved the problem  jQuery function                 jQuery  form myform   submit function event                   event preventDefault                   return false

User · Answer

Turn off submit on  Enter  key     form   bind  keypress   function  e        if  e keyCode    13                btnSearch   attr  value              add more buttons here         return false

User · Answer

The ENTER key merely activates the form s default submit button  which will be the first    lt input type  submit    gt    the browser finds within the form   Therefore don t have a submit button  but something like   lt input type  button  value  Submit  onclick  submitform      gt       EDIT  In response to discussion in comments   This doesn t work if you have only one text field - but it may be that is the desired behaviour in that case   The other issue is that this relies on Javascript to submit the form  This may be a problem from an accessibility point of view  This can be solved by writing the  lt input type  button   gt  with javascript  and then put an  lt input type  submit    gt  within a  lt noscript gt  tag  The drawback of this approach is that for javascript-disabled browsers you will then have form submissions on ENTER  It is up to the OP to decide what is the desired behaviour in this case   I know of no way of doing this without invoking javascript at all

User · Answer

To prevent form submit when pressing enter in a textarea or input field  check the submit event to find what type of element sent the event   Example 1  HTML   lt button type  submit  form  my-form  gt Submit lt  button gt   lt form id  my-form  gt       lt  form gt    jQuery    document  on  submit    form   function e        if  e delegateTarget activeElement type    submit             e preventDefault                A better solution is if you don t have a submit button and you fire the event with a normal button  It is better because in the first examlple 2 submit events are fired  but in the second example only 1 submit event is fired   Example 2  HTML   lt button type  button  onclick      my-form   submit     gt Submit lt  button gt   lt form id  my-form  gt       lt  form gt    jQuery    document  on  submit    form   function e        if  e delegateTarget activeElement localName    button             e preventDefault

User · Answer

You will find this more simple and useful  D    document  on  submit    form   function e          on form submit find the trigger        if    e delegateTarget activeElement  not  input  textarea   length    0               if the trigger is not between selectors list  return super false            e preventDefault            return false

User · Answer

How about    lt script gt  function isok e      var name   e explicitOriginalTarget name    if  name     button         return true       return false     lt  script gt   lt form onsubmit  return isok event    gt   lt input type  text  name  serial   gt   lt input type  submit  name  button  value  Create Thing   gt   lt  form gt    And just name your button right and it will still submit  but text fields i e  the explicitOriginalTarget when you hit return in one  will not have the right name

User · Answer

You will have to call this function whic will just cancel the default submit behaviour of the form  You can attach it to any input field or event   function doNothing       var keyCode   event keyCode   event keyCode   event which   event which   event charCode      if  keyCode    13           if  e  var e   window event       e cancelBubble   true      e returnValue   false       if  e stopPropagation            e stopPropagation            e preventDefault

User · Answer

In short answer in pure Javascript is    lt script type  text javascript  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 only disables the  Enter  keypress action for input type  text   Visitors can still use  Enter  key all over the website      If you want to disable  Enter  for other actions as well  you can add console log e   for your your test purposes  and hit F12 in chrome  go to  console  tab and hit  backspace  on the page and look inside it to see what values are returned  then you can target all of those parameters to further enhance the code above to suit your needs for  e target nodeName    e target type  and many more      See my detailed answer for a similar question here

User · Answer

Add this tag to your form - onsubmit  return false   Then you can only submit your form with some JavaScript function

User · Answer

Here is a jQuery handler that can be used to stop enter submits  and also stop backspace key -  back   The  keyCode  selectorString  pairs in the  keyStop  object are used to match nodes that shouldn t fire their default action   Remember that the web should be an accessible place  and this is breaking keyboard users  expectations  That said  in my case the web application I am working on doesn t like the back button anyway  so disabling its key shortcut is OK   The  should enter -  submit  discussion is important  but not related to the actual question asked   Here is the code  up to you to think about accessibility and why you would actually want to do this     function     var keyStop        8    not input text  textarea  input file  input password       stop backspace   back    13   input text  input password      stop enter   submit      end  null        document  bind  keydown   function event     var selector   keyStop event which      if selector     undefined  amp  amp    event target  is selector           event preventDefault      stop event       return true

User · Answer

Please check this article How to prevent ENTER keypress to submit a web form    x000D   x000D        pc prevent submit     ready function     x000D      window  keydown function event    x000D      if  event keyCode    13    x000D        event preventDefault    x000D        return false  x000D        x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form class    pc prevent submit    action        method    post    gt  x000D     lt input type    text    name    username    gt  x000D     lt input type    password    name    userpassword    gt  x000D     lt input type    submit    value    submit    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Simply add this attribute to your FORM tag   onsubmit  return gbCanSubmit     Then  in your SCRIPT tag  add this   var gbCanSubmit   false    Then  when you make a button or for any other reason  like in a function  you finally permit a submit  simply flip the global boolean and do a  submit   call  similar to this example   function submitClick          error handler code goes here and return false if bad data       okay  proceed      gbCanSubmit   true        myform   submit       jQuery example

User · Answer

Another approach is to append the submit input button to the form only when it is supposed to be submited and replace it by a simple div during the form filling

User · Answer

I Have come across this myself because I have multiple submit buttons with different  name  values  so that when submitted they do different things on the same php file  The enter   return button breaks this as those values aren t submitted  So I was thinking  does the enter   return button activate the first submit button in the form  That way you could have a  vanilla  submit button that is either hidden or has a  name  value that returns the executing php file back to the page with the form in it  Or else a default  hidden   name  value that the keypress activates  and the submit buttons overwrite with their own  name  values  Just a thought

User · Answer

This link provides a solution that has worked for me in Chrome  FF  and IE9 plus the emulator for IE7 and 8 that comes with IE9 s developer tool  F12    http   webcheatsheet com javascript disable enter key php

User · Answer

revision 2012  no inline handler  preserve textarea enter handling   function checkEnter e    e   e    event   var txtArea    textarea i test  e target    e srcElement  tagName    return txtArea     e keyCode    e which    e charCode    0      13      Now you can define a keypress handler on the form   lt form       onkeypress  return checkEnter event   gt   document querySelector  form   onkeypress   checkEnter

User · Answer

Simply return false from the onsubmit handler   lt form onsubmit  return false   gt    or if you want a handler in the middle   lt script gt  var submitHandler   function          do stuff   return false     lt  script gt   lt form onsubmit  return submitHandler    gt

User · Answer

Here s how I d do it   window addEventListener  keydown   function event        if  event key      Enter                 if event target type      submit                         event preventDefault                return false

User · Answer

You can trap the keydown on a form in javascript and prevent the even bubbling  I think   ENTER on a webpage basically just submits the form that the currently selected control is placed in

User · Answer

If none of those answers are working for you  try this  Add a submit button before the one that actually submits the form and just do nothing with the event  HTML  lt  -- The following button is meant to do nothing  This button will catch the  quot enter quot  key press and stop it s propagation  -- gt   lt button type  quot submit quot  id  quot EnterKeyIntercepter quot  style  quot cursor  auto  outline  transparent  quot  gt  lt  button gt   JavaScript     EnterKeyIntercepter   click  event    gt        event preventDefault      The buck stops here        If you don t know what this if statement does  just delete it        if  process env NODE ENV      production             console log  quot The enter key was pressed and captured by the mighty Enter Key Inceptor           quot

User · Answer

I ve always done it with a keypress handler like the above in the past  but today hit on a simpler solution  The enter key just triggers the first non-disabled submit button on the form  so actually all that s required is to intercept that button trying to submit    lt form gt     lt div style  display  none   gt       lt input type  submit  name  prevent-enter-submit  onclick  return false   gt     lt  div gt     lt  -- rest of your form markup -- gt   lt  form gt    That s it  Keypresses will be handled as usual by the browser   fields   etc  If the enter-submit logic is triggered  then the browser will find that hidden submit button and trigger it  And the javascript handler will then prevent the submision

User · Answer

This worked for me  onkeydown  return   event keyCode  13         lt form id  form1  runat  server  onkeydown  return   event keyCode  13   gt       lt  form gt

User · Answer

I had the same problem  forms with tons of text fields and unskilled users    I solved it in this way   function chkSubmit         if  window confirm  Do you want to store the data               return true        else              some code to focus on a specific field         return false            using this in the HTML code    lt form     action  go php       method  post      accept-charset  utf-8        enctype  multipart form-data      onsubmit  return chkSubmit     gt    In this way the ENTER key works as planned  but a confirmation  a second ENTER tap  usually  is required   I leave to the readers the quest for a script sending the user in the field where he pressed ENTER if he decide to stay on the form

User · Answer

All the answers I found on this subject  here or in other posts has one drawback and that is it prevents the actual change trigger on the form element as well  So if you run these solutions onchange event is not triggered as well  To overcome this problem I modified these codes and developed the following code for myself  I hope this becomes useful for others  I gave a class to my form  prevent auto submit  and added the following JavaScript     document  ready function             form prevent auto submit input form prevent auto submit select   keypress function event                  if  event keyCode    13                        event preventDefault                  this  trigger  change

User · Answer

stopSubmitOnEnter  e      var eve   e    window event    var keycode   eve keyCode    eve which    eve charCode     if  keycode    13        eve cancelBubble   true      eve returnValue   false       if  eve stopPropagation             eve stopPropagation          eve preventDefault               return false          Then on your form    lt form id  foo  onkeypress  stopSubmitOnEnter e    gt    Though  it would be better if you didn t use obtrusive JavaScript

User · Answer

I ve spent some time making this cross browser for IE8 9 10  Opera 9   Firefox 23  Safari  PC  and Safari MAC   JSFiddle Example  http   jsfiddle net greatbigmassive ZyeHe   Base code - Call this function via  onkeypress  attached to your form and pass  window event  into it   function stopEnterSubmitting e        if  e keyCode    13            var src   e srcElement    e target          if  src tagName toLowerCase       textarea                 if  e preventDefault                    e preventDefault                  else                   e returnValue   false

User · Answer

Preventing  ENTER  to submit form may inconvenience some of your users  So it would be better if you follow the procedure below   Write the  onSubmit  event in your form tag    lt form name  formname  id  formId  onSubmit  return testSubmit        gt                     lt  form gt    write Javascript function as follows   function testSubmit      if jQuery   formId   valid                    return true                 return false                  OR    What ever the reason  if you want to prevent the form submission on pressing Enter key  you can write the following function in javascript         document  ready function                 window  keydown function event             if event keyCode    13                   event preventDefault                   return false                                                thanks

User · Answer

How about    lt asp Button ID  button  UseSubmitBehavior  false   gt

User · Answer

put into javascript external file       function          window  keydown function  event           if  event keyCode    13             return false                 jQuery     or somewhere inside body tag   lt script gt      document  ready function           window  keydown function event            alert 1            if event keyCode    13                 return false                          lt  script gt

[javascript] How to prevent ENTER keypress to submit a web form?

Examples related to javascript

Examples related to events