How to submit a form when the return key is pressed

Question

Can someone please tell me how to submit an HTML form when the return key is pressed and if there are no buttons in the form  The submit button is not there  I am using a custom div instead of that

User · Answer

Extending on the answers  this is what worked for me  maybe someone will find it useful   Html   lt form method  post  action   url  id  editMeta  gt      lt textarea class  form-control  onkeypress  submitOnEnter event   gt  lt  textarea gt   lt  form gt    Js  function submitOnEnter e      if  e which    13        document getElementById  editMeta   submit

User · Answer

To submit the form when the enter key is pressed create a javascript function along these lines   function checkSubmit e       if e  amp  amp  e keyCode    13          document forms 0  submit             Then add the event to whatever scope you need eg on the div tag    lt div onKeyPress  return checkSubmit event    gt   This is also the default behaviour of Internet Explorer 7 anyway though  probably earlier versions as well

User · Answer

Use the following script    lt SCRIPT TYPE  text javascript  gt   lt  --     function submitenter myfield e                var keycode          if  window event  keycode   window event keyCode          else if  e  keycode   e which          else return true           if  keycode    13                        myfield form submit                return false                    else             return true          -- gt   lt  SCRIPT gt    For each field that should submit the form when the user hits enter  call the submitenter function as follows    lt FORM ACTION     cgi-bin formaction pl  gt      name       lt INPUT NAME realname SIZE 15 gt  lt BR gt      password   lt INPUT NAME password TYPE PASSWORD SIZE 10        onKeyPress  return submitenter this event   gt  lt BR gt   lt INPUT TYPE SUBMIT VALUE  Submit  gt   lt  FORM gt

User · Answer

I tried various javascript jQuery-based strategies  but I kept having issues  The latest issue to arise involved accidental submission when the user uses the enter key to select from the browser s built-in auto-complete list  I finally switched to this strategy  which seems to work on all the browsers my company supports    lt div class  hidden-submit  gt  lt input type  submit  tabindex  -1   gt  lt  div gt     hidden-submit       border  0 none      height  0      width  0      padding  0      margin  0      overflow  hidden      This is similar to the currently-accepted answer by Chris Marasti-Georg  but by avoiding display  none  it appears to work correctly on all browsers   Update  I edited the code above to include a negative tabindex so it doesn t capture the tab key  While this technically won t validate in HTML 4  the HTML5 spec includes language to make it work the way most browsers were already implementing it anyway

User · Answer

Use the  lt button gt  tag  From the W3C standard      Buttons created with the BUTTON element function just like buttons created with the INPUT element  but they offer richer rendering possibilities  the BUTTON element may have content  For example  a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to  image   but the BUTTON element type allows content    Basically there is another tag   lt button gt   which requires no javascript  that also can submit a form  It can be styled much in the way of a  lt div gt  tag  including  lt img   gt  inside the button tag   The buttons from the  lt input   gt  tag are not nearly as flexible    lt button type  submit  gt       lt img src  my-icon png    gt      Clicking will submit the form  lt  button gt    There are three types to set on the  lt button gt   they map to the  lt input gt  button types    lt button type  submit  gt Will submit the form lt  button gt   lt button type  reset  gt Will reset the form lt  button gt   lt button type  button  gt Will do nothing  add javascript onclick hooks lt  button gt    Standards   W3C wiki about  lt button gt  HTML5  lt button gt  HTML4  lt button gt    I use  lt button gt  tags with css-sprites and a bit of css styling to get colorful and functional form buttons  Note that it s possible to write css for  for example   lt a class  button  gt  links share to styling with the  lt button gt  element

User · Answer

I use this method    lt form name  test  method post action  sendme php  gt       lt input type text name  test1  gt       lt input type button value  send  onClick  document test submit    gt       lt input type image src  spacer gif  gt    lt  --  lt  lt  lt  lt  this is the secret  -- gt   lt  form gt    Basically  I just add an invisible input of type image  where  spacer gif  is a 1x1 transparent gif    In this way  I can submit this form either with the  send  button or simply by pressing enter on the keyboard   This is the trick

User · Answer

Here is how I do it with jQuery  j   textBoxClass   keypress function e           if the key pressed is the enter key     if  e which    13                   do work             Other javascript wouldnt be too different  the catch is checking for keypress argument of  13   which is the enter key

User · Answer

Similar to Chris Marasti-Georg s example  instead using inline javascript  Essentially add onkeypress to the fields you want the enter key to work with  This example acts on the password field    lt html gt   lt head gt  lt title gt title lt  title gt  lt  head gt   lt body gt     lt form action    method  get  gt    Name   lt input type  text  name  name   gt  lt br  gt    Pwd   lt input type  password  name  password  onkeypress  if event keyCode  13   javascript form submit        gt  lt br  gt     lt input type  submit  onClick  javascript form submit      gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

Since display  none buttons and inputs won t work in Safari and IE  I found that the easiest way  requiring no extra javascript hacks  is to simply add an absolutely positioned  lt button   gt  to the form and place it far off screen    lt form action    method  get  gt     lt input type  text  name  name    gt     lt input type  password  name  password    gt     lt div class  yourCustomDiv   gt     lt button style  position absolute left -10000px right 9990px   gt   lt  form gt    This works in the current version of all major browsers as of September 2016   Obviously its reccomended  and more semantically correct  to just style the  lt button  gt  as desired

User · Answer

I believe this is what you want      lt   CDATA     Send form if they hit enter  document onkeypress   enter  function enter e      if  e which    13    sendform           Form to send function sendform       document forms 0  submit           gt    Every time a key is pressed  function enter   will be called   If the key pressed matches the enter key  13   then sendform   will be called and the first encountered form will be sent   This is only for Firefox and other standards compliant browsers   If you find this code useful  please be sure to vote me up

User · Answer

Using the  autofocus  attribute works to give input focus to the button by default  In fact clicking on any control within the form also gives focus to the form  a requirement for the form to react to the RETURN  So  the  autofocus  does that for you in case the user never clicked on any other control within the form   So  the  autofocus  makes the crucial difference if the user never clicked on any of the form controls before hitting RETURN   But even then  there are still 2 conditions to be met for this to work without JS   a  you have to specify a page to go to  if left empty it wont work   In my example it is hello php  b  the control has to be visible  You could conceivably move it off the page to hide  but you cannot use display none or visibility hidden  What I did  was to use inline style to just move it off the page to the left by 200px  I made the height 0px so that it does not take up space  Because otherwise it can still disrupt other controls above and below  Or you could float the element too      lt form action  hello php  method  get  gt    Name   lt input type  text  name  name   gt  lt br  gt    Pwd   lt input type  password  name  password   gt  lt br  gt     lt div class  yourCustomDiv   gt     lt input autofocus type  submit  style  position relative  left -200px  height 0px     gt   lt  form gt

User · Answer

I think you should actually have a submit button or a submit image    Do you have a specific reason for using a  submit div   If you just want custom styles I recommend  lt input type  image      http   webdesign about com cs forms a aaformsubmit 2 htm

User · Answer

IMO  this is the cleanest answer     x000D   x000D   lt form action    method  get  gt  x000D    Name   lt input type  text  name  name   gt  lt br  gt  x000D    Pwd   lt input type  password  name  password   gt  lt br  gt  x000D     lt div class  yourCustomDiv   gt  x000D     lt input type  submit  style  display none   gt  x000D   lt  form gt  x000D   x000D   x000D    Better yet  if you are using javascript to submit the form using the custom div  you should also use javascript to create it  and to set the display none style on the button  This way users with javascript disabled will still see the submit button and can click on it     It has been noted that display none will cause IE to ignore the input   I created a new JSFiddle example that starts as a standard form  and uses progressive enhancement to hide the submit and create the new div   I did use the CSS styling from StriplingWarrior

User · Answer

If you are using asp net you can use the defaultButton attribute on the form

User · Answer

Why don t you just apply the div submit styles to a submit button   I m sure there s a javascript for this but that would be easier

[javascript] How to submit a form when the return key is pressed?

Examples related to javascript

Examples related to html