When pressing enter on an input text field will suddenly not submit the form...sure surprised me!
Note: This blog post is from 2007. Some content may be outdated--though not necessarily. Same with links and subsequent comments from myself or others. Corrections are welcome, in the comments. And I may revise the content as necessary.Most know that a form will submit if you press enter while the cursor focus is on a text field (INPUT TYPE="text"|"radio"|"checkbox"). Some have surely noticed that you don't often even need a submit button, which can be nice when creating some simple interfaces.
But did you know that the submit will not happen if you have two input text fields (and no submit button)? I found this when I had a long-working form of this sort, to which I added a second input field. Suddenly, it stopped submitting on pressing enter. I've tested this in either IE 6 or Firefox 2. I explain the scenario and a solution, below.
The problem
I had a small form on my UGTV recordings list page, which let users enter search criteria. Today, someone asked me to let them indicate how many records to show by default, and when I added a second input box for that, suddenly the submit would not work. (If you look, you'll find the 2nd input field at the bottom of the form, but it doesn't matter. It's within the one form, and the problem happened regardless of where the 2nd field was placed.)Again, the key is that I have no submit button in this scenario (as it would just look clunky, and is otherwise unnecessary).
Some solutions
So I did some digging and found that indeed others have observed this. One suggestion offered was that you provide a submit button but use CSS to make it invisible. You can't really use "display:none" because then, in IE 6 at least, it still thinks it's not there.But you can set its height and width to 0 and set the border to none, and it solves the problem:
If you'd like some simple code to test with, here you go:
<input name="i1" type="text"/>
<input name="i2" type="text" />
<input type="submit" style="width: 0px;height: 0px;border: none">
</form>
If you're curious about the empty action, that just makes the page self-posting. If you're interested in that, or have any comment on that aspect, please see my other blog entry on the subject.
For more content like this from Charlie Arehart:Need more help with problems?
- Signup to get his blog posts by email:
- Follow his blog RSS feed
- View the rest of his blog posts
- View his blog posts on the Adobe CF portal
- If you may prefer direct help, rather than digging around here/elsewhere or via comments, he can help via his online consulting services
- See that page for more on how he can help a) over the web, safely and securely, b) usually very quickly, c) teaching you along the way, and d) with satisfaction guaranteed
I think I have another workaround too... In my apps I have a toolbar with nicely styled buttons and I also keep the submit button hidden so that it doesn't make the form look ugly but still provides the default "enter" functionality. I think the reason it works for me in IE6 is because I've placed the submit button is inside a div that has a class of "hidden" (and appropriate CSS in a CSS file somewhere), so the CSS isn't appllied directly to the button and it seems to work sweet. I don't have the code here to double check, but I'm pretty sure that's how I did it :)
I have been frustrated lately that hitting enter quit submit my forms in FireFox 2.0, while working properly on select other browser. Your solution worked great and my forms submit perfectly now. I tweaked it into a class that overrides any default button styles I may have applied:
.input-hidden
{
border : none !important;
height : 0px !important;
padding : 0px !important;
width : 0px !important;
}
I'm running across some similar problem but not exactly like yours. Hopefully you can help me with.
On my search results page I have paging and there's a text input field for "jump to page" so users can enter a number and go to that page. The only problem is this field needs to be at both top and bottom of the page.
Thus, I have 2 text input fields and 2 submit buttons in 1 form. The problem I'm having is on the top, everything is ok whether pressing enter or clicking submit. However, for the bottom, only clicking submit will work, pressing enter does not work.
Pls kindly help me with this. Thank you very much in advance
But what you're trying to do certainly should work. And I'll say it could just be an HTML coding error (a missing closing tag or such).
With such problems, it's always best to break things down to a simple example to confirm that what you think you see is really what's happening. :-) Here's a simple form, with 2 input fields and submit buttons. When I run that, in either FF or IE 7, the dump shows whatever value I enter in either field, whether I hit the button or just hit enter. How about for you?
<form method="post" action="">
<input type="text" name="name">
<input type="Submit" name="sub">
<br>
<input type="text" name="name2">
<input type="Submit" name="sub2">
</form>
<cfdump var="#form#">
Test that yourself, then try evolving it to add more of what your form does--or make a dupe of your form page and remove stuff out of the middle to confirm if it ever works, and then add stuff back in until it fails.
If my simple example above works for you, then I'm really inclined to think there's something amiss in the form (HTML) that may be the cause. Let us know.
Have you notice that in IE7, when you have one <input type="text"...> and one submit control <input type="submit"... onclick="return MyValidation()"> the text control submits the form but do not process the MyValidation() function?
Well, thaks to you, I was able to add a second invisible (i.e. width: 0px;height: 0px;border: none) text input and now the page is work as expected.
All the best!
I've added one small attribute to your input because I have OCD and didn't like tabbing to a phantom input ;-)
<input type="submit" tabindex="-1" style="width: 0px;height: 0px;border: none">
The tabindex at -1 will ensure it gets skipped.
Thanks for the helpful fix!
After showing an alert my input field would no longer anything I typed in, I could paste text into but not write anything.. really weird.
<form name = "myform">
<p>USER NAME <input type="text" name="username"> PASSWORD <input type="password" name="pword">
<input type="button" value="Check In" name="Submit" onclick= "validate()">
</p>
</form>
This Works Great For Clicking On The Button.. But I Also Want To Hit Enter And It Do The Same Thing.. So I Change Input Type To Submit Instead Of Button.. It Just Refreshes The Page.. Anything Helps.. Also Im Not Using PHP Im Using Java Coding.. Im Building A Simple Webpage Offline For Now :) Can U Help??