402

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?

6
  • 10
    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
    Commented May 12, 2013 at 16:30
  • 1
    @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
    Commented Aug 3, 2017 at 16:59
  • 3
    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 developer.mozilla.org/en-US/docs/Web/CSS/length and drafts.csswg.org/css-values-3/#lengths
    – pwdst
    Commented Aug 4, 2017 at 10:04
  • 3
    If in doubt, put an explicit length unit in other words.
    – pwdst
    Commented Aug 4, 2017 at 10:05
  • 4
    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.
    Commented Mar 16, 2018 at 17:26

21 Answers 21

323

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" />
17
  • 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; Commented Nov 3, 2010 at 1:01
  • 93
    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
    Commented Apr 10, 2011 at 7:40
  • 34
    @nornagon: If you feel that this hack is horrible, feel free to suggest a less horrible one. HTML is what it is...
    – Ates Goral
    Commented Apr 10, 2011 at 21:07
  • 15
    @MooseFactory tabindex="-1"
    – Ates Goral
    Commented Jul 13, 2012 at 16:04
  • 17
    "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). Commented Jan 20, 2013 at 18:31
106

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>
7
  • 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
    Commented Jan 26, 2009 at 11:35
  • 4
    This will cause the submit button to appear for a moment (until the page loads and the JS runs).
    – nornagon
    Commented Apr 10, 2011 at 7:34
  • 23
    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
    Commented Mar 11, 2012 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
    Commented Feb 9, 2015 at 2:54
  • 2
    @Campbeln you may be able to use .on('keypress'...) instead. The docs for .on() look like it does the .preventDefault() call for you. Commented Nov 18, 2016 at 22:09
84

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.

3
  • 5
    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.
    – loybert
    Commented Sep 28, 2012 at 15:32
  • 10
    You can combine both solutions: <input type="submit" style="visibility: hidden; position: absolute;" />
    – VaclavSir
    Commented Dec 11, 2013 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
    Commented Dec 11, 2013 at 15:27
41

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

});
2
  • 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
    Commented May 17, 2016 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
    Commented May 17, 2016 at 14:13
34

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 />
4
  • While it seems to work with desktop Chrome, it doesn't seem to work with Chrome or Safari on iPhone.
    – Ulf Adams
    Commented Aug 21, 2018 at 13:25
  • @UlfAdams It works with Chrome and Safari on iPhone 12.1.2. Commented Feb 6, 2019 at 16:59
  • 3
    unfortunately does not yet work in Safari 14.2 (macOS)
    – fabb
    Commented Mar 2, 2021 at 15:01
  • 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
    – jlhasson
    Commented Jul 14, 2022 at 5:16
14

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.

0
11

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>
5
  • 4
    Attribute hidden will disable submit by pressing enter.
    – 66Ton99
    Commented Sep 23, 2013 at 8:11
  • @66Ton99 Just test in FF. It do not disable submittion Commented Jan 10, 2017 at 18:13
  • 2
    "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. Commented Jun 12, 2017 at 20:40
  • Works on Chrome 63
    – piotr_cz
    Commented Jan 19, 2018 at 20:21
  • Doesn't work in Chrome or Safari on iPhone at this time.
    – Ulf Adams
    Commented Aug 21, 2018 at 13:28
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.

2
  • Safari interprets visibility: collapse like visibility: hidden, so the button will still cause a white area: caniuse.com/mdn-css_properties_visibility_collapse
    – fabb
    Commented Mar 2, 2021 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
    Commented Mar 2, 2021 at 16:30
8

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

8

HTML5 solution

<input type="submit" hidden />
1
  • Same as above - doesn't work with Chrome or Safari on iPhone.
    – Ulf Adams
    Commented Aug 21, 2018 at 13:30
7
<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.

6

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

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

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}
1
  • Seems like IE8 doesn't like position:absolute, it doesn't submit.
    – maxxyme
    Commented Jul 9, 2014 at 17:18
5

the simplest way

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

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

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

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}
3
  • I'd still use position:absolute, float affects the layout. Commented Apr 30, 2014 at 6:50
  • Seems like IE8 doesn't like position:absolute, it doesn't submit. I use:
    – maxxyme
    Commented Jul 9, 2014 at 17:15
  • Same for float: left;, when removed, it submits.
    – maxxyme
    Commented Jul 9, 2014 at 17:38
3

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

2
  • 1
    IMPORTANT: you MUST use a valid image URL or Firefox will show a "Submit Query" text on your page
    – PH.
    Commented Dec 12, 2012 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
    Commented May 12, 2013 at 16:35
3
input.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});
1
  • 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.
    – Eric
    Commented May 19, 2022 at 12:14
2

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

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

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>