Submitting a form by pressing enter without a submit button
https://stackoverflow.com/questions/477691
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
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?
Solution
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" />
OTHER TIPS
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.
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;
}
});
});
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 />
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.
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.
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>
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.
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"/>
This is my solution, tested in Chrome, Firefox 6 and IE7+:
.hidden{
height: 1px;
width: 1px;
position: absolute;
z-index: -100;
}
the simplest way
<input type="submit" style="width:0px; height:0px; opacity:0;"/>
For those who have problems with IE and for others too.
{
float: left;
width: 1px;
height: 1px;
background-color: transparent;
border: none;
}
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
<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.
HTML5 solution
<input type="submit" hidden />
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);
});
}
I've used
< input class="hidden" type="submit" value=""
onclick="document.getElementById('loginform').submit()"; />
and
.hidden {
border:0;
padding:0;
font-size:0;
width: 0px;
height: 0px;
}
in the .css file. It worked magically for me too. :)
