How come pressing the ENTER key acts like a SUBMIT on some pages but not on others?

roricka
roricka used Ask the Experts™
on
Imagine a simple ASPX (or any middleware) page with a text input field and a SUBMIT button.

If I want to be sure that pressing the ENTER key will submit the form (that is, it will act like clicking on the SUBMIT button when the cursor resides inside the entry field), I just trap the key event using javascript and fire the SUBMIT. It works but it's a hassle.

Why is it that for some pages ENTER magically works to submit a form without using any extra logic?

I always thought pressing the ENTER key was like clicking on the "next" control in the tree on the document (i.e., the control you would be on if you hit TAB).

But many times that does not work. Pressing ENTER just generates an error.

So -- WHAT does the ENTER key do? Why does it sometimes act like clicking SUBMIT and sometimes it does not (i.e. on different pages.)?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
gurvinder372:

Hey man, thanks for trying to help. I may have misunderstood what you wrote, but please don't take this the wrong way, but did you read my post, or just the title? An honest queston -- not meant to offend. I frequently notice that helpers only read titles, and I have begun to think I should be more careful in the way I word them.

Normally, however, I rely on somebody actually reading what I posted. Did you notice I said I was interested in understanding what was going on? I think all those links you listed either use event trapping or some cute .aspx functionality, such as DefaultButton (that's a neat one!)

No, really, I am trying to understand why it sometimes works with javascript and sometimes it doesn't. Honestly, I don't need a bunch of links telling me how to script event trapping. As I said in my 2nd sentence -- that's clearly a solution. But that's not why I posted. Do you have any insight as to my actual question? In other words, why does it work sometimes and not others?

Granted, you may think this is a dumb question. But it is my question, nonetheless.
Oh please.. No Offense taken at all.

It would help if you can post the html where enter-submit is working and the one where it is not working.

Thanks
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
i dont know about aspx. but generally in gui programming you can make a button the default pushbutton. it is a button property. then <enter> would invoke that button by creating an event.
Check the tab order of your controls.

Also, When enter works then it may be the default button control (like on default OK button, or the ID of default button, you replace the text with Enter/Submit and put your logic their). While for other forms where it fails to work on a simple button.
Also the controls where the focus is , if handling the enter key (like multiline edit control) the enter will not go even to default one but to next line.

Hope it helps a bit.

 
The difference is on the type of the submit button. If it's defined as type="button" there is not action when you press enter but if it's defined as type="submit" it does. Try changing the type of the button on this script to see how it works:

<html>
<body>
<head>
<script type="text/javascript">
function submitForm(){
      alert("submitting!");
}
</script>
</head>
<form>
<input type="text">
<input value="send" type="submit" onClick="submitForm();"
</form>
</body>
</html>

Author

Commented:
Thanks everyone for their contribs. I'm addressing all the comments. This will be a little long, but that's because I want to get to the bottom of this, and nobody's suggestion has worked for me yet! Here goes:

gurvinder372: I'd like to post the code, but how do I do it? The original page is c#.net and would be useless to post (thousands of lines in the project). And if I simply view source, I can't get the page to run at all without so much emasculation that by the time it runs error-free  the problem goes away. I know IE8 has fancy view source tools, but I'm just beginning to see how they work. Can you tell me a fool-proof recipe for extracting client code from a running page that will always actually run?

I will say the two actual controls look like this under view source:

THIS ONE WORKS (note the form, 2 input fields, and a submit button. Oddly, the Enter key acts like a click on the Submit button when the focus is on the FIRST of the two input fields!):
<form name="coaccesstoplevel" method="post" action="coaccess.aspx?ckill=1264742913382" id="coaccesstoplevel">
    <input name="caselogin" type="password" size="25" id="caselogin" />
    <input name="txtCompCase" type="password" size="25" id="txtCompCase" />
    <input type=submit value=Submit>
 </form>


THE ONE DOESN'T (note the form, one input field, and a submit button):
<form name="TakeTheSurvey" method="post" action="takesurvey.aspx?ckill=1264746756907" id="TakeTheSurvey" onsubmit="javascript: return ValidateAnswers();">
    <input name="IDLogin" type="password" maxlength="7" size="25" id="IDLogin" />
    <input type="submit" name="ctl02" value="Login" onclick="protectMenu();" />
</form>

js-profi: I do not know what you mean by "it is a button property." If you are talking about HTML attributes of <input type=button> the closest things I find are Accesskey and Tabindex. Neither of these creates a default. But I agree it shouldn't matter what middleware is involved. At the end of the day, it's the browser doing the heavy-lifting, so there must be a straight HTML explanation.

Speaking of which, I found an article at
http://www.hanselman.com/blog/ASPNETHowToCreateADefaultEnterButtonForFormsPostBacks.aspx
with a guy just like me, saying why does Enter just seem to work in some places, and in others you have to jump through all these hoops! But I'm afraid this article doesn't give an answer (other than refer to trapping events, which we already know how to do.)

AnilKumarSharma:
1. As I originally stated, the tab order doesn't seem to be the problem. When I press tab the button gets focus, so no doubt it is next in the tree.
2. Again, like for ja-profi -- what do you MEAN by "default" button. This is not an HTML construct I am familiar with. Enlighten me!
3. I understand <textarea> won't work because the Enter key has a different function there.
But I am talking about focus being in a simple <input type=password> when I press Enter.

flacolocofeo: Ah! I read yours and I thought Eureka -- that's it! But no, both buttons are <input type=submit>, as you can see from the code above.

Incidentally, when I press Enter on the page that doesn't work, I get this run-time error:

Line: 782 [note: view source only shows 680 lines!]
Error: 'this._postBackSettings.async' is null or not an object.
What is that??

Rory

=>what do you MEAN by "default" button. This is not an HTML construct I am familiar with. Enlighten me!

Making a button-control's event handler to be a default event handler for a situation when an "ENTER" key is pressed can be achieved by setting the defaultbutton property of the "form" element.

See it these help a bit further.
http://www.codeproject.com/KB/aspnet/WebPageOrWebFormTips.aspx

==>Why is it that for some pages ENTER magically works to submit a form without using any extra logic?
You have extra control (text in that form where it works) and not in other where it fails. Taking it with example, try to place one ASP.NET textbox and a button to the web form. Write a code on a OnClick event of a button.  On  press enter while focus is on textbox, form will submit, but your code for button's click event will not be executed.
Now place one more simple HTML textbox to the form. You will not write anything in this textbox, so you can even make it invisible. Just place it somewhere inside of your form tag. You cannot see the second textbox, and everything looks like before. Try again to write something in first textbox. If you press enter now, form will submit, and your code for button's click event will now be executed.
Problem complicates if you have a few buttons with only one textbox, or more than one text box with only one button, or many text boxes and many buttons. So add onkeydown attribute to respective textbox control.

Finally look into this if it helps a bit.
http://www.beansoftware.com/asp.net-tutorials/accept-enter-key.aspx



I tried the code of your forms and they both work properly! So, maybe it is the version of your navigator. I tried them with Firefox 3.6, Opera 10 and Chrome 4 (linux)

Author

Commented:
AnilKumarSharma -- I am still working on a full response, but in the mean time...

Flacolocofeo: unfortunately, as I said above, you can't just take this out of context. Of course these work "as is" -- I mean I realize it is because of other "unseen" factors that there is a problem. The difficulty is that just doing a brute-force "view source" doesn't result in runnable code. My code fails with those browsers you mention, and I'm sorry I can't give you a link to it because of the passwords required.

But tell me, do any of the navigators you mention (or IE) have a version of the "view source" command that will yield running HTML/javascript from a complex page created from .net? I have always found that I need to "emasculate" the results, and that by the time all the run-time errors are gone, so is the problem.

Do you understand what I mean?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial