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?
I work with a bunch of UI frameworks. Many of them have a built-in class you can use to visually hide things.
<input type="submit" class="sr-only" tabindex="-1">
<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;
}
the simplest way
<input type="submit" style="width:0px; height:0px; opacity:0;"/>
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
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.
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>
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.
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 />
I work with a bunch of UI frameworks. Many of them have a built-in class you can use to visually hide things.
<input type="submit" class="sr-only" tabindex="-1">
<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;
}
the simplest way
<input type="submit" style="width:0px; height:0px; opacity:0;"/>
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 />
<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.
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.
This is my solution, tested in Chrome, Firefox 6 and IE7+:
.hidden{
height: 1px;
width: 1px;
position: absolute;
z-index: -100;
}
For those who have problems with IE and for others too.
{
float: left;
width: 1px;
height: 1px;
background-color: transparent;
border: none;
}
HTML5 solution
<input type="submit" hidden />
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>
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;
}
});
});
input.on('keypress', function(event) {
if ( event.which === 13 ) {
form.submit();
return false;
}
});
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.
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"/>
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.
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.
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);
});
}
This is my solution, tested in Chrome, Firefox 6 and IE7+:
.hidden{
height: 1px;
width: 1px;
position: absolute;
z-index: -100;
}
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
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>
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.
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>
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>
<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.
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.
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"/>
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
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
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.
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;
}
});
});
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.
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.
input.on('keypress', function(event) {
if ( event.which === 13 ) {
form.submit();
return false;
}
});
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.
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 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>
Source: Stackoverflow.com