Submitting a form by pressing enter without a submit button
HtmlFormsSubmitHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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" />
Solution 2 - Html
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>
Solution 3 - Html
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.
Solution 4 - Html
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;
}
});
});
Solution 5 - Html
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 />
Solution 6 - Html
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.
Solution 7 - Html
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>
Solution 8 - Html
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.
Solution 9 - Html
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.
Solution 10 - Html
HTML5 solution
<input type="submit" hidden />
Solution 11 - Html
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"/>
Solution 12 - Html
<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.
Solution 13 - Html
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;
}
Solution 14 - Html
This is my solution, tested in Chrome, Firefox 6 and IE7+:
.hidden{
height: 1px;
width: 1px;
position: absolute;
z-index: -100;
}
Solution 15 - Html
the simplest way
<input type="submit" style="width:0px; height:0px; opacity:0;"/>
Solution 16 - Html
input.on('keypress', function(event) {
if ( event.which === 13 ) {
form.submit();
return false;
}
});
Solution 17 - Html
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
Solution 18 - Html
For those who have problems with IE and for others too.
{
float: left;
width: 1px;
height: 1px;
background-color: transparent;
border: none;
}
Solution 19 - Html
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);
});
}
Solution 20 - Html
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>