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?

July

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. – Monoatomic

@Monoatomic 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? – Gelatinize

Zero is the exception to the rule here @Gelatinize - 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 developer.mozilla.org/en-US/docs/Web/CSS/length and drafts.csswg.org/css-values-3/#lengths – Monoatomic

If in doubt, put an explicit length unit in other words. – Monoatomic

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). – Betz

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 – Heptateuch

Answer 1

Update 2022: Use this instead

<input type="submit" hidden />

---

Notice - Outdated answer
Please do not use position: absolute in the year 2021+. It's recommended to use the hidden attribute instead. Otherwise, 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" />

Twickenham

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? – Ectogenous

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; – Unconditional

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? – Gobioid

@nornagon: If you feel that this hack is horrible, feel free to suggest a less horrible one. HTML is what it is... – Twickenham

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. – Boong

display:none; or visibility:hidden; are too clichè? – Pelagia

@Pelagia 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. – Twickenham

Not very nice. You'll still be able to tab to the "hidden" button. – Insider

@MooseFactory tabindex="-1" – Twickenham

"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. 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). – Animated

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. – Fortyish

@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. – Twickenham

yack, a little of JS will do no harm – Nominee

This is ugly nasty hack! But since it works perfectly, I'm going to stick with it and upvote this :) – Foreplay

@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 – Alla

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. – Chancellor

@Chancellor 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. – Twickenham

Answer 2

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>

Goosefoot

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. – Itinerant

This will cause the submit button to appear for a moment (until the page loads and the JS runs). – Gobioid

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. – Darbie

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. – Shornick

I added a keyup binding to the form element instead of each input. – Villarreal

@Shornick you may be able to use .on('keypress'...) instead. The docs for .on() look like it does the .preventDefault() call for you. – Nejd

I love the JavaScript route ;) – Quinze

Answer 3

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.

Itinerant

there's just one thing about visibility: hidden: as you can read in w3schools, visibity:none still affects the layout. If you want to avoid this whitespace, the solution with absolute positioning seems to be better for me. – Ridenhour

You can combine both solutions: <input type="submit" style="visibility: hidden; position: absolute;" /> – Shult

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; – Shult

Answer 4

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

});

Funch

Weird trick. That you make your button into a text box! But since the trick works for all the browsers, I have credited you! – Referent

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). – Funch

Answer 5

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 />

Henryk

While it seems to work with desktop Chrome, it doesn't seem to work with Chrome or Safari on iPhone. – Steppe

@UlfAdams It works with Chrome and Safari on iPhone 12.1.2. – Thersathersites

unfortunately does not yet work in Safari 14.2 (macOS) – Robertoroberts

This correctly hides the submit button but disables "submit on enter". Does anyone know the browser compatibility of this? Looking at caniuse.com/hidden doesn't provide much info – Escadrille

Answer 6

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.

Jena

Answer 7

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>

Radbun

Attribute hidden will disable submit by pressing enter. – Tender

@Tender Just test in FF. It do not disable submittion – Chickasaw

"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. – Bullet

Works on Chrome 63 – Lodgment

Doesn't work in Chrome or Safari on iPhone at this time. – Steppe

Answer 8

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.

Pepsinogen

Safari interprets visibility: collapse like visibility: hidden, so the button will still cause a white area: caniuse.com/mdn-css_properties_visibility_collapse – Robertoroberts

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. – Pepsinogen

Answer 9

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

Lobotomy

Answer 10

<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.

Giuliana

Answer 11

HTML5 solution

<input type="submit" hidden />

Sutter

Same as above - doesn't work with Chrome or Safari on iPhone. – Steppe

Answer 12

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"/>

Returnee

Answer 13

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

Annis

Answer 14

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

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

Poche

Seems like IE8 doesn't like position:absolute, it doesn't submit. – Barite

Answer 15

the simplest way

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

Lugansk

Answer 16

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

Agave

IMPORTANT: you MUST use a valid image URL or Firefox will show a "Submit Query" text on your page – Disease

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. – Monoatomic

Answer 17

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

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

Schroer

I'd still use position:absolute, float affects the layout. – Pargeting

Seems like IE8 doesn't like position:absolute, it doesn't submit. I use: – Barite

Same for float: left;, when removed, it submits. – Barite

Answer 18

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

Trombley

This works, if add the handler to each input that wish commit on enter. BTW, it's better to use if (event.key === "Enter") to check which the key is. – Austinaustina

Answer 19

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

Osyth

Answer 20

Modern answer for 2023 and beyond

The other answers are old or use jquery (which is also old and shouldn't be used in modern apps). keyCode is also deprecated and shouldn't be used.

<form id="myform">
  <input type="text" id="q" name="q" placeholder="Search...">
</form>

<script>
document.querySelector('#id').addEventListener('keydown', (event) => {
  if(event.key === 'Enter'){
    document.querySelector('#myform').submit()
    return false
  }
})
</script>

Pearcy

Answer 21

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>

Proudfoot