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:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>

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?

Small point that might shave a few characters off your CSS and will typically be done automatically be minifiers- you do not need units for zero length measurements. 0px = 0pt = 0em = 0em etc. — pwdst, May 12 '13 at 16:30
@pwdst thanks for pointing this out - I'm from the Python world, so "explicit is better than implicit", and genuinely wondering if this is the case in CSS, or do CSS creators have a different idiom? — ericmjl, Aug 03 '17 at 16:59
Zero is the exception to the rule here @ericmjl - 0px == 0em == 0% == 0vh == 0vh etc. In other (non-zero) length measurements it is not only bad practice but against standards not to specify units and you'll see varying behaviour in user agents (browsers). See https://developer.mozilla.org/en-US/docs/Web/CSS/length and https://drafts.csswg.org/css-values-3/#lengths — pwdst, Aug 04 '17 at 10:04
While it certainly doesn't hurt to add the unit with 0, not having any should be 100% valid regardless of language, in fact all the way back up to mathematical abstractions. OTOH, a handy use of having vs. not having them is to convey the message whether the given property is "really meant to be 0, and stay that way" (no unit), vs. "that thing happens to be zero now, but might be adjusted to taste; or whatever..." (with unit). — Sz., Mar 16 '18 at 17:26
Adding as a comment as it doesn't really answer the question, but for anyone looking; the default behaviour is for the form to submit on Enter ONLY if there's one input. More than one, and you'll need a submit button — divillysausages, Jul 25 '19 at 12:20

Ates Goral · Accepted Answer · 2021-03-31T18:10:04.303

252

Notice
Please do not use this in the year 2021+. Look down below and pick a better - more modern - answer.

Try:

<input type="submit" style="position: absolute; left: -9999px"/>

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):

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />

edited Mar 31 '21 at 18:10

answered Jan 25 '09 at 13:45

Ates Goral

126,894
24
129
188

Anyone having trouble with this in IE 7? I get a huge submit bar that runs the entire width of the page with this solution. I've had to go the JS route as a result. Any suggestions? – Erebus Jul 22 '10 at 18:48
10

Just tried this solution in IE7 with the same result as Erebus. The following code fixes it: `position: absolute; width: 1px; height: 1px; left: -9999px;` – Bryan Downing Nov 03 '10 at 01:01
89

What a horrible hack :( why is HTML like this in the first place? Is there a good reason for enter not to work in this case? – nornagon Apr 10 '11 at 07:40
32

@nornagon: If you feel that this hack is horrible, feel free to suggest a less horrible one. HTML is what it is... – Ates Goral Apr 10 '11 at 21:07
1

IMO, the OP's original solution is a lot more elegant than this one. It's only a different way to accomplish the same thing AND it had to be altered to keep browser compatibility which is what the OP wanted in the first place. – Jeff LaFay Aug 17 '11 at 11:12
1

display:none; or visibility:hidden; are too clichè? – Plokko Apr 24 '12 at 10:27
1

@Plokko Depending on the browser, some hidden elements are not entirely functional. The workaround is to push them out of the screen instead of hiding them. – Ates Goral Apr 24 '12 at 13:33
4

Not very nice. You'll still be able to tab to the "hidden" button. – Oundless Jul 13 '12 at 14:55
14

@MooseFactory `tabindex="-1"` – Ates Goral Jul 13 '12 at 16:04
16

"the nice thing is ... graceful degradation when CSS is disabled"?! I mean sure, this works great, but the "graceful degradation" part is just marketing tactics. I hadn't even heard of it until I found [this page from the year 2002](http://www.webmasterworld.com/forum83/80.htm). That's right, the _only_ Google result on the first page for "css is disabled in the browser" is from _10 years ago_ (or 7 considering this answer was put up in 2009). – Vicky Chijwani Jan 20 '13 at 18:31
3

Working well, thx for this solution. For those asking about why not just "display:none": In chrome and FF 20 (I've only tested these two) if I hide the submit button with display:none, the onsubmit="..." attribute of the form is acting weird /e.g. doesn't respect "return false" and submitting the form anyway/. I've found it out in the hard way, I hope someone will learn from this. – Andrew Jun 28 '13 at 11:57
8

@VickyChijwani You can end up with a page without CSS if you're on a slow connection and the loading of the CSS is taking time / is interrupted. You can still have a functioning [but ugly] page with graceful degradation. It's also about robustness, not just about 10 year old marketing fads. – Ates Goral Aug 22 '13 at 19:21
1

yack, a little of JS will do no harm – Danny22 Aug 25 '14 at 21:56
3

This is ugly nasty hack! But since it works perfectly, I'm going to stick with it and upvote this :) – LihO Jun 21 '15 at 10:21
3

@Vicky Chijwani graceful degradation might come handy for physically challenged and any software they use. This is a must for any government web, at least in most of the countries – Adam Fischer Jul 08 '15 at 13:24
1

Please do not use this in the year 2021+. Look down below and pick a better - more modern - answer. StackOverflow should really consider expiring thumb-ups after a while. – Tafel Mar 31 '21 at 11:14
@Tafel Yeah, I wish answer authors had the option to un-accept their own answers. I could delete my answer, but then the advice against using this method would be destroyed. I'll add your comment as a notice at the top. – Ates Goral Mar 31 '21 at 18:07

score 102 · Answer 2 · edited Sep 19 '13 at 01:22

102

I think you should go the Javascript route, or at least I would:

<script type="text/javascript">
// 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();
    });
});
</script>


<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" />
</form>

edited Sep 19 '13 at 01:22

sanmai

23,569
11
54
73

answered Jan 25 '09 at 20:45

strager

84,025
24
129
172

7

nice one, tested and working fine. But before trying something like this, remember that submitting form via Javascript won't cause some browsers to offer the password saving stuff. – andyk Jan 26 '09 at 11:35
4

This will cause the submit button to appear for a moment (until the page loads and the JS runs). – nornagon Apr 10 '11 at 07:34
19

A keypress is also triggered for a selection from autocomplete, i.e. if the user is inputting an email address and he/she selects a previously given one from the browser's autocomplete by hitting enter, then your form will submit. Not what your users will expect. – cburgmer Mar 11 '12 at 10:08
3

I switched to `keydown` from `keypress` for wider support, but you also need to add `e.preventDefault();` before the `if` if you hope to support Chrome. – Campbeln Feb 09 '15 at 02:54
I added a keyup binding to the form element instead of each input. – Justin Fisher Jan 19 '16 at 14:45
2

@Campbeln you may be able to use `.on('keypress'...)` instead. The docs for `.on()` look like it does the `.preventDefault()` call for you. – jinglesthula Nov 18 '16 at 22:09
I love the JavaScript route ;) – Noah Broyles Feb 08 '20 at 18:09

score 82 · Answer 3 · edited Jan 25 '09 at 20:39

82

Have you tried this ?

<input type="submit" style="visibility: hidden;" />

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.

edited Jan 25 '09 at 20:39

strager

84,025
24
129
172

answered Jan 25 '09 at 20:34

andyk

9,921
10
34
39

4

there's just one thing about `visibility: hidden`: as you can read in [w3schools](http://www.w3schools.com/css/css_display_visibility.asp), _visibity:none_ still affects the layout. If you want to avoid this whitespace, the solution with absolute positioning seems to be better for me. – loybert Sep 28 '12 at 15:32
8

You can combine both solutions: `` – VaclavSir Dec 11 '13 at 14:27
2

Damn it, this doesn't work in IE8 (it doesn't submit the form), so the solution from above wins: `position: absolute; left: -100px; width: 1px; height: 1px;` – VaclavSir Dec 11 '13 at 15:27

damoiser · Answer 4 · 2016-10-26T15:11:06.697

34

Another solution without the submit button:

HTML

<form>
  <input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>

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;
    }
  });

});

edited Oct 26 '16 at 15:11

answered Nov 02 '13 at 17:16

damoiser

5,532
2
36
60

1

Weird trick. That you make your button into a text box! But since the trick works for all the browsers, I have credited you! – Jenna Leaf May 17 '16 at 13:49
thanks @JennaLeaf ;-) Anyway I think that it is not so weird - lot of online forms use as submit the simply "triggering" of the keydown. An example could be the google search-bar (perhaps they don't use exactly this code, but probably something similar). – damoiser May 17 '16 at 14:13

score 23 · Answer 5 · answered Apr 04 '17 at 14:34

23

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.

<input type="submit" hidden />

answered Apr 04 '17 at 14:34

Panomosh

689
2
6
18

While it seems to work with desktop Chrome, it doesn't seem to work with Chrome or Safari on iPhone. – Ulf Adams Aug 21 '18 at 13:25
@UlfAdams It works with Chrome and Safari on iPhone 12.1.2. – Matthew Campbell Feb 06 '19 at 16:59
unfortunately does not yet work in Safari 14.2 (macOS) – fabb Mar 02 '21 at 15:01

score 13 · Answer 6 · edited Jan 30 '12 at 23:16

13

Use following code, this fixed my problem in all 3 browsers (FF, IE and Chrome):

<input  type="submit" name="update" value=" Apply " 
    style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
    hidefocus="true" tabindex="-1"/>

Add above line as a first line in your code with appropriate value of name and value.

edited Jan 30 '12 at 23:16

Erik Funkenbusch

90,480
27
178
274

answered Nov 14 '11 at 09:54

Mayank Gupta

131
1
2

score 9 · Answer 7 · answered Apr 03 '13 at 15:34

9

Just set the hidden attribute to true:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" hidden="true" />
</form>

answered Apr 03 '13 at 15:34

jumpnett

6,117
1
16
23

4

Attribute hidden will disable submit by pressing enter. – 66Ton99 Sep 23 '13 at 08:11
@66Ton99 Just test in FF. It do not disable submittion – Eugen Konkov Jan 10 '17 at 18:13
1

"it works on my machine" ;) there are a lot more browsers than firefox. one can arguably want a solution that works reliably cross-browser wise. – Félix Gagnon-Grenier Jun 12 '17 at 20:40
Works on Chrome 63 – piotr_cz Jan 19 '18 at 20:21
Doesn't work in Chrome or Safari on iPhone at this time. – Ulf Adams Aug 21 '18 at 13:28

score 7 · Answer 8 · answered Jun 20 '16 at 15:01

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.

<input type="submit" style="border:0; padding:0; font-size:0">

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

score 7 · Answer 9 · answered Jan 25 '09 at 13:43

7

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.

answered Jan 25 '09 at 13:43

Noldorin

134,265
53
250
293

Safari interprets `visibility: collapse` like `visibility: hidden`, so the button will still cause a white area: https://caniuse.com/mdn-css_properties_visibility_collapse – fabb Mar 02 '21 at 15:03
Uff, that's bad. Apple need to get their shit together. Not only in violation of the standards, but also of the intuitive meaning of the words. – Noldorin Mar 02 '21 at 16:30

score 5 · Answer 10 · answered Jun 12 '14 at 23:55

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.

<input type="image" src="img/1x1trans.gif"/>

score 5 · Answer 11 · edited Mar 30 '17 at 00:34

5

<input type="submit" style="display:none;"/>

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.

edited Mar 30 '17 at 00:34

Unheilig

15,690
193
65
96

answered Mar 30 '17 at 00:12

Shammoo

908
9
20

Andrew Luca · Answer 12 · 2018-08-14T11:01:54.747

5

HTML5 solution

<input type="submit" hidden />

edited Aug 14 '18 at 11:01

answered Aug 14 '18 at 09:49

Andrew Luca

2,339
1
24
34

Same as above - doesn't work with Chrome or Safari on iPhone. – Ulf Adams Aug 21 '18 at 13:30

score 5 · Answer 13 · edited Jun 20 '20 at 09:12

I work with a bunch of UI frameworks. Many of them have a built-in class you can use to visually hide things.

Bootstrap

<input type="submit" class="sr-only" tabindex="-1">

Angular Material

<input type="submit" class="cdk-visually-hidden" tabindex="-1">

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;
}

score 4 · Answer 14 · answered Sep 22 '13 at 17:47

4

the simplest way

<input type="submit" style="width:0px; height:0px; opacity:0;"/>

answered Sep 22 '13 at 17:47

Shahin Mammadzada

59
2
5

score 4 · Answer 15 · answered Oct 01 '11 at 22:00

4

This is my solution, tested in Chrome, Firefox 6 and IE7+:

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}

answered Oct 01 '11 at 22:00

vjnrv

81
2

Seems like IE8 doesn't like position:absolute, it doesn't submit. – maxxyme Jul 09 '14 at 17:18

Jekis · Answer 16 · 2010-11-10T21:39:54.907

2

For those who have problems with IE and for others too.

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}

edited Nov 10 '10 at 21:39

answered Nov 10 '10 at 20:46

Jekis

3,640
2
30
38

I'd still use position:absolute, float affects the layout. – SuperDuck Apr 30 '14 at 06:50
Seems like IE8 doesn't like position:absolute, it doesn't submit. I use: – maxxyme Jul 09 '14 at 17:15
Same for `float: left;`, when removed, it submits. – maxxyme Jul 09 '14 at 17:38

score 2 · Answer 17 · edited Jun 13 '14 at 17:00

2

You could try also this

<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">

You could include an image with width/height = 0 px

edited Jun 13 '14 at 17:00

Hoodai

105
1
2
14

answered Jan 25 '09 at 13:45

waney

392
1
5
20

1

IMPORTANT: you MUST use a valid image URL or Firefox will show a "Submit Query" text on your page – PH. Dec 12 '12 at 16:45
2

If you add an image that exists and set height and width to zero, or add a non-existent image then the browser will have to make a wasted GET request for the resource. – pwdst May 12 '13 at 16:35

score 1 · Answer 18 · answered Mar 27 '13 at 14:58

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 = "<input type='submit' style='position: absolute; left: -9999px; width: 1px; height: 1px;' tabindex='-1'/>";
    $("form").each(function(i,el){
        if($(this).find(":submit").length==0)
            $(this).append(hiddenSubmit);
    });
}

score 1 · Answer 19 · answered Nov 26 '19 at 18:04

1

input.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});

answered Nov 26 '19 at 18:04

Marty

41
5

score 0 · Answer 20 · edited Dec 21 '20 at 17:36

Here is the code that worked to me sure it will help you

<form name="loginBox" target="#here" method="post">
  <input name="username" type="text" /><br />
  <input name="password" type="password" />
  <input type="submit" />
</form>

<script type="text/javascript">
  $(function () {
    $("form").each(function () {
      $(this)
        .find("input")
        .keypress(function (e) {
          if (e.which == 10 || e.which == 13) {
            this.form.submit();
          }
        });
      $(this).find("input[type=submit]").hide();
    });
  });
</script>

Submitting a form by pressing enter without a submit button

20 Answers20

Bootstrap

Angular Material

Linked

Related