Submitting a form by pressing enter without a submit button
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" />
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>
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.