Submitting a form by pressing enter without a submit button

Question

Well I am trying to submit a form by pressing enter but not displaying a submit button  I don t want to get into JavaScript if possible since I want everything to work on all browsers  the only JS way I know is with events    Right now the form looks like this    lt form name  loginBox  target   here  method  post  gt       lt input name  username  type  text    gt  lt br   gt       lt input name  password  type  password    gt       lt input type  submit  style  height  0px  width  0px  border  none  padding  0px   hidefocus  true    gt   lt  form gt    Which works pretty well  The submit button works when the user presses enter  and the button doesn t show in Firefox  IE  Safari  Opera and Chrome  However  I still don t like the solution since it is hard to know whether it will work on all platforms with all browsers   Can anyone suggest a better method  Or is this about as good as it gets

User · Answer

I work with a bunch of UI frameworks   Many of them have a built-in class you can use to visually hide things  Bootstrap  lt input type  quot submit quot  class  quot sr-only quot  tabindex  quot -1 quot  gt   Angular Material  lt input type  quot submit quot  class  quot cdk-visually-hidden quot  tabindex  quot -1 quot  gt   Brilliant minds who created these frameworks have defined these styles as follows   sr-only       position  absolute      width  1px      height  1px      padding  0      overflow  hidden      clip  rect 0  0  0  0       white-space  nowrap      border  0      cdk-visually-hidden       border  0      clip  rect 0 0 0 0       height  1px      margin  -1px      overflow  hidden      padding  0      position  absolute      width  1px      outline  0      -webkit-appearance  none      -moz-appearance  none

User · Answer

the simplest way   lt input type  submit  style  width 0px  height 0px  opacity 0    gt

User · Answer

Instead of the hack you currently use to hide the button  it would be much simpler to set visibility  collapse  in the style attribute  However  I would still recommend using a bit of simple Javascript to submit the form  As far as I understand  support for such things is ubiquitous nowadays

User · Answer

I think you should go the Javascript route  or at least I would    lt script type  text javascript  gt     Using jQuery     function            form   each function               this  find  input   keypress function e                   Enter pressed              if e which    10    e which    13                    this form submit                                         this  find  input type submit    hide                 lt  script gt     lt form name  loginBox  target   here  method  post  gt       lt input name  username  type  text    gt  lt br   gt       lt input name  password  type  password    gt       lt input type  submit    gt   lt  form gt

User · Answer

Have you tried this     lt input type  submit  style  visibility  hidden     gt    Since most browsers understand visibility hidden and it doesn t really work like display none  I m guessing that it should be fine  though  Haven t really tested it myself  so CMIIW

User · Answer

For anyone looking at this answer in future  HTML5 implements a new attribute for form elements  hidden  which will automatically apply display none to your element   e g    lt input type  submit  hidden   gt

User · Answer

You could try also this   lt INPUT TYPE  image  SRC  0piximage gif  HEIGHT  0  WIDTH  0  BORDER  0  gt    You could include an image with width height   0 px

User · Answer

Try    lt input type  submit  style  position  absolute  left  -9999px   gt    That will push the button waaay to the left  out of the screen  The nice thing with this is  you d get graceful degradation when CSS is disabled   Update - Workaround for IE7  As suggested by Bryan Downing   with tabindex to prevent tab reach this button  by Ates Goral     lt input type  submit          style  position  absolute  left  -9999px  width  1px  height  1px          tabindex  -1    gt

User · Answer

Instead of the hack you currently use to hide the button  it would be much simpler to set visibility  collapse  in the style attribute  However  I would still recommend using a bit of simple Javascript to submit the form  As far as I understand  support for such things is ubiquitous nowadays

User · Answer

Instead of the hack you currently use to hide the button  it would be much simpler to set visibility  collapse  in the style attribute  However  I would still recommend using a bit of simple Javascript to submit the form  As far as I understand  support for such things is ubiquitous nowadays

User · Answer

I work with a bunch of UI frameworks   Many of them have a built-in class you can use to visually hide things  Bootstrap  lt input type  quot submit quot  class  quot sr-only quot  tabindex  quot -1 quot  gt   Angular Material  lt input type  quot submit quot  class  quot cdk-visually-hidden quot  tabindex  quot -1 quot  gt   Brilliant minds who created these frameworks have defined these styles as follows   sr-only       position  absolute      width  1px      height  1px      padding  0      overflow  hidden      clip  rect 0  0  0  0       white-space  nowrap      border  0      cdk-visually-hidden       border  0      clip  rect 0 0 0 0       height  1px      margin  -1px      overflow  hidden      padding  0      position  absolute      width  1px      outline  0      -webkit-appearance  none      -moz-appearance  none

User · Answer

Try    lt input type  submit  style  position  absolute  left  -9999px   gt    That will push the button waaay to the left  out of the screen  The nice thing with this is  you d get graceful degradation when CSS is disabled   Update - Workaround for IE7  As suggested by Bryan Downing   with tabindex to prevent tab reach this button  by Ates Goral     lt input type  submit          style  position  absolute  left  -9999px  width  1px  height  1px          tabindex  -1    gt

User · Answer

the simplest way   lt input type  submit  style  width 0px  height 0px  opacity 0    gt

User · Answer

For those who have problems with IE and for others too         float  left      width  1px      height  1px      background-color  transparent      border  none

User · Answer

I think you should go the Javascript route  or at least I would    lt script type  text javascript  gt     Using jQuery     function            form   each function               this  find  input   keypress function e                   Enter pressed              if e which    10    e which    13                    this form submit                                         this  find  input type submit    hide                 lt  script gt     lt form name  loginBox  target   here  method  post  gt       lt input name  username  type  text    gt  lt br   gt       lt input name  password  type  password    gt       lt input type  submit    gt   lt  form gt

User · Answer

lt input type  submit  style  display none    gt    This works fine and it is the most explicit version of what you re trying to achieve   Note that there is a difference between display none and visibility hidden for other form elements

User · Answer

The most elegant way of doing this is to keep the submit-button  but set it s border  padding and font-size to 0    This will make the button dimensions 0x0    lt input type  submit  style  border 0  padding 0  font-size 0  gt    You can try this yourself  and by setting an outline to the element you will see a dot  which is the outside border  surrounding  the 0x0 px element   No need for visibility hidden  but if it makes you sleep at night  you can throw that in the mix as well   JS Fiddle

User · Answer

This is my solution  tested in Chrome  Firefox 6 and IE7     hidden      height  1px      width  1px      position  absolute      z-index  -100

User · Answer

Use following code  this fixed my problem in all 3 browsers  FF  IE and Chrome     lt input  type  submit  name  update  value   Apply        style  position  absolute  height  0px  width  0px  border  none  padding  0px       hidefocus  true  tabindex  -1   gt    Add above line as a first line in your code with appropriate value of name and value

User · Answer

I think you should go the Javascript route  or at least I would    lt script type  text javascript  gt     Using jQuery     function            form   each function               this  find  input   keypress function e                   Enter pressed              if e which    10    e which    13                    this form submit                                         this  find  input type submit    hide                 lt  script gt     lt form name  loginBox  target   here  method  post  gt       lt input name  username  type  text    gt  lt br   gt       lt input name  password  type  password    gt       lt input type  submit    gt   lt  form gt

User · Answer

Have you tried this     lt input type  submit  style  visibility  hidden     gt    Since most browsers understand visibility hidden and it doesn t really work like display none  I m guessing that it should be fine  though  Haven t really tested it myself  so CMIIW

User · Answer

For those who have problems with IE and for others too         float  left      width  1px      height  1px      background-color  transparent      border  none

User · Answer

I think you should go the Javascript route  or at least I would    lt script type  text javascript  gt     Using jQuery     function            form   each function               this  find  input   keypress function e                   Enter pressed              if e which    10    e which    13                    this form submit                                         this  find  input type submit    hide                 lt  script gt     lt form name  loginBox  target   here  method  post  gt       lt input name  username  type  text    gt  lt br   gt       lt input name  password  type  password    gt       lt input type  submit    gt   lt  form gt

User · Answer

HTML5 solution   lt input type  submit  hidden   gt

User · Answer

Here is the code that worked to me sure it will help you  lt form name  quot loginBox quot  target  quot  here quot  method  quot post quot  gt     lt input name  quot username quot  type  quot text quot    gt  lt br   gt     lt input name  quot password quot  type  quot password quot    gt     lt input type  quot submit quot    gt   lt  form gt    lt script type  quot text javascript quot  gt      function             quot form quot   each function              this           find  quot input quot            keypress function  e              if  e which    10    e which    13                this form submit                                    this  find  quot input type submit  quot   hide                   lt  script gt

User · Answer

This is my solution  tested in Chrome  Firefox 6 and IE7     hidden      height  1px      width  1px      position  absolute      z-index  -100

User · Answer

For anyone looking at this answer in future  HTML5 implements a new attribute for form elements  hidden  which will automatically apply display none to your element   e g    lt input type  submit  hidden   gt

User · Answer

Another solution without the submit button   HTML   lt form gt     lt input class  submit on enter  type  text  name  q  placeholder  Search     gt   lt  form gt    jQuery    document  ready function            submit on enter   keydown function event           enter has keyCode   13  change it if you want to use another button     if  event keyCode    13          this form submit          return false

User · Answer

I added it to a function on document ready  If there is no submit button on the form  all of my Jquery Dialog Forms don t have submit buttons   append it     document  ready function         addHiddenSubmitButtonsSoICanHitEnter        function addHiddenSubmitButtonsSoICanHitEnter        var hiddenSubmit     lt input type  submit  style  position  absolute  left  -9999px  width  1px  height  1px   tabindex  -1   gt           form   each function i el           if   this  find   submit   length  0                this  append hiddenSubmit

User · Answer

You could try also this   lt INPUT TYPE  image  SRC  0piximage gif  HEIGHT  0  WIDTH  0  BORDER  0  gt    You could include an image with width height   0 px

User · Answer

Here is the code that worked to me sure it will help you  lt form name  quot loginBox quot  target  quot  here quot  method  quot post quot  gt     lt input name  quot username quot  type  quot text quot    gt  lt br   gt     lt input name  quot password quot  type  quot password quot    gt     lt input type  quot submit quot    gt   lt  form gt    lt script type  quot text javascript quot  gt      function             quot form quot   each function              this           find  quot input quot            keypress function  e              if  e which    10    e which    13                this form submit                                    this  find  quot input type submit  quot   hide                   lt  script gt

User · Answer

HTML5 solution   lt input type  submit  hidden   gt

User · Answer

I added it to a function on document ready  If there is no submit button on the form  all of my Jquery Dialog Forms don t have submit buttons   append it     document  ready function         addHiddenSubmitButtonsSoICanHitEnter        function addHiddenSubmitButtonsSoICanHitEnter        var hiddenSubmit     lt input type  submit  style  position  absolute  left  -9999px  width  1px  height  1px   tabindex  -1   gt           form   each function i el           if   this  find   submit   length  0                this  append hiddenSubmit

User · Answer

Try    lt input type  submit  style  position  absolute  left  -9999px   gt    That will push the button waaay to the left  out of the screen  The nice thing with this is  you d get graceful degradation when CSS is disabled   Update - Workaround for IE7  As suggested by Bryan Downing   with tabindex to prevent tab reach this button  by Ates Goral     lt input type  submit          style  position  absolute  left  -9999px  width  1px  height  1px          tabindex  -1    gt

User · Answer

IE doesn t allow pressing the ENTER key for form submission if the submit button is not visible  and the form has more than one field   Give it what it wants by providing a 1x1 pixel transparent image as a submit button  Of course it will take up a pixel of the layout  but look what you have to do to hide it    lt input type  image  src  img 1x1trans gif   gt

User · Answer

lt input type  submit  style  display none    gt    This works fine and it is the most explicit version of what you re trying to achieve   Note that there is a difference between display none and visibility hidden for other form elements

User · Answer

input on  keypress   function event        if   event which     13             form submit            return false

User · Answer

You could try also this   lt INPUT TYPE  image  SRC  0piximage gif  HEIGHT  0  WIDTH  0  BORDER  0  gt    You could include an image with width height   0 px

User · Answer

Instead of the hack you currently use to hide the button  it would be much simpler to set visibility  collapse  in the style attribute  However  I would still recommend using a bit of simple Javascript to submit the form  As far as I understand  support for such things is ubiquitous nowadays

User · Answer

Use following code  this fixed my problem in all 3 browsers  FF  IE and Chrome     lt input  type  submit  name  update  value   Apply        style  position  absolute  height  0px  width  0px  border  none  padding  0px       hidefocus  true  tabindex  -1   gt    Add above line as a first line in your code with appropriate value of name and value

User · Answer

input on  keypress   function event        if   event which     13             form submit            return false

User · Answer

Have you tried this     lt input type  submit  style  visibility  hidden     gt    Since most browsers understand visibility hidden and it doesn t really work like display none  I m guessing that it should be fine  though  Haven t really tested it myself  so CMIIW

User · Answer

Just set the hidden attribute to true    lt form name  loginBox  target   here  method  post  gt       lt input name  username  type  text    gt  lt br   gt       lt input name  password  type  password    gt       lt input type  submit  hidden  true    gt   lt  form gt

User · Answer

Just set the hidden attribute to true    lt form name  loginBox  target   here  method  post  gt       lt input name  username  type  text    gt  lt br   gt       lt input name  password  type  password    gt       lt input type  submit  hidden  true    gt   lt  form gt

User · Answer

Another solution without the submit button   HTML   lt form gt     lt input class  submit on enter  type  text  name  q  placeholder  Search     gt   lt  form gt    jQuery    document  ready function            submit on enter   keydown function event           enter has keyCode   13  change it if you want to use another button     if  event keyCode    13          this form submit          return false

User · Answer

Try    lt input type  submit  style  position  absolute  left  -9999px   gt    That will push the button waaay to the left  out of the screen  The nice thing with this is  you d get graceful degradation when CSS is disabled   Update - Workaround for IE7  As suggested by Bryan Downing   with tabindex to prevent tab reach this button  by Ates Goral     lt input type  submit          style  position  absolute  left  -9999px  width  1px  height  1px          tabindex  -1    gt

User · Answer

Have you tried this     lt input type  submit  style  visibility  hidden     gt    Since most browsers understand visibility hidden and it doesn t really work like display none  I m guessing that it should be fine  though  Haven t really tested it myself  so CMIIW

User · Answer

The most elegant way of doing this is to keep the submit-button  but set it s border  padding and font-size to 0    This will make the button dimensions 0x0    lt input type  submit  style  border 0  padding 0  font-size 0  gt    You can try this yourself  and by setting an outline to the element you will see a dot  which is the outside border  surrounding  the 0x0 px element   No need for visibility hidden  but if it makes you sleep at night  you can throw that in the mix as well   JS Fiddle

User · Answer

You could try also this   lt INPUT TYPE  image  SRC  0piximage gif  HEIGHT  0  WIDTH  0  BORDER  0  gt    You could include an image with width height   0 px

User · Answer

IE doesn t allow pressing the ENTER key for form submission if the submit button is not visible  and the form has more than one field   Give it what it wants by providing a 1x1 pixel transparent image as a submit button  Of course it will take up a pixel of the layout  but look what you have to do to hide it    lt input type  image  src  img 1x1trans gif   gt

[html] Submitting a form by pressing enter without a submit button

Bootstrap

Angular Material

Examples related to html

Examples related to forms

Examples related to submit