File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes the enter key forces a submit Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "the enter key forces a submit" Watch "the enter key forces a submit" New topic
Author

the enter key forces a submit

Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84
hi

I have a normal html form. When I press the enter key on any field in that form it performs submit. I want that the user cannot perform submit with the "enter/return" key. Anyone?

Thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Return false from the onsubmit handler. That way, the form can only be submitted under script control, which you can do in an onclick handler for the button that you want to use to submit the form.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84
should I use onclick or onkeypress or onsubmit.?
I am using these events on the form tag not on the submit tag because first of all I am not using a submit button, I am using a regular button for some reasons(maybe this may be the cause in the first place).

But I would appreciate sommme pseudo code. Thankyou
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Or, remove the submit button and submit the form under script control upon the click of a non-submit button.

Essentially, if a form has a submit button, and Enter will submit the form.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Originally posted by Ashimashi Kabashi:
I am not using a submit button
If you don't have a submit button, the form will generally not submit upon Enter in a form field. Are you sure that there's no submit button?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

To control such submits, I generally:

1) Include an onsubmit handler for the form that returns false.

2) Include a button of type "button" that has a click handler with a call to the submit() method of the form.
Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84
thats exactly what I am doing.
i.e. using a normal button that explicitly submits when I want it to.

But when focus is set to any Input Box and the enter key is pressed. Bang Next Page.

I tried an onsubmit event handler on the form itself, that executes when I press enter. But after it does what its supposed to do (in my case just an alert message to see if the event is handled) it just goes to the next page despite returning false.

Should I rather try on onkeypress event handler on the form and chcek if enter is pressed and then return false?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Originally posted by Ashimashi Kabashi:
it just goes to the next page despite returning false.

Something is weird about that. Please pare your example down to the smallest possible code that demonstrates the issue and post it.

Should I rather try on onkeypress event handler on the form and chcek if enter is pressed and then return false?
Please look up the expression "grasping at straws" and don't do it.

When something that is supposed to work doesn't, it's best to find out why because it will usually reveal some underlying problem that workarounds may cause to bite you in the keester later on.
[ April 03, 2008: Message edited by: Bear Bibeault ]
Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84

[ April 04, 2008: Message edited by: Bear Bibeault ]
Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84
anything??
Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84
you may ignore the php if you want. its just to display the button if it meets a condition
Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84
i have researched some java script examples, and have seen that this is exactly how they do it. (i.e. return false). But I am probably doing something wrong in the above code snippet
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Forms with one textbox will submit on enter. Try adding a second textbox and set it to be hidden.

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Originally posted by Eric Pascarello:
Forms with one textbox will submit on enter.
Good catch! I left that one off the list. But it doesn't explain why the return of false isn't halting the submission.
[ April 03, 2008: Message edited by: Bear Bibeault ]
Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84
wow thanks!
who wud have thunk?
anyway... its not working with extra hidden fields. so I had to add one extra text field
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Found your problem!

In the future, please be sure that you code is better formatted and show the code actually delivered to the browser without any php (or JSP) markup. That all made it hard to look through.

The problem is that you are discarding the false value returned from your submit handler!

The attribute onsubmit="checkButton()" should be onsubmit="return checkButton()". (No need for extra fields).

If you don't understand the difference let me know.

[eric - edited from return onsubmit="checkButton() to onsubmit="return checkButton()"]
[ April 03, 2008: Message edited by: Eric Pascarello ]
Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84
ok i will...
i dont know the diff between the two though. Could use some help.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

When you use the event attributes on element markup, such as the onclick attribute of the form element, it's actually syntactic sugar on creating an anonymous function to assign as the event listener.

For example, when you write:


What really happens is the equivalent of:


Note that the script that you placed within the attribute becomes the body of the anonymous function that serves as the event listener. So placing a "return false" within the doSomething function doesn't work because that return value is discarded by the anonymous function.

By adding the return to the attribute:


What really happens is now the equivalent of:


In this case, the false value returned by doSomething is propagated as the return value of the anonymous listener, and all works as expected.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Problems and nuances such as this is one of the reasons that the concept of "Unobtrusive JavaScript" is becoming more and more important as the client code within HTML pages becomes more complex.

In the same way that CSS allowed us to remove stylistic information from the HTML markup (you wouldn't even think of using the <font> tag anymore, would you?), the concept of Unobtrusive JavaScript dictates that script -- in other words, behavior -- should not be embedded in the markup either.

So the use of the event handling attributes within the element markup should be eliminated and replaced with assigning event handlers and the like in the onload handler of the page (or better yet, the document-ready handler, if using advanced JavaScript libraries such as jQuery).

That way, not only is behavior not embedded in the markup, it's easier to see what's really happening and avoid pitfalls that arise when using the shortcuts.
Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84
thanks... good info
Ashimashi Kabashi
Ranch Hand

Joined: Sep 11, 2006
Posts: 84
To Bear:

i have checked out jQuery and have noticed your contributions to it.
Your book sounds awesome. I have started some of its implementations in my webpage. A couple of more days will get me going. Thanks for the great info.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Originally posted by Ashimashi Kabashi:
Thanks for the great info.

My pleasure.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: the enter key forces a submit
 
Similar Threads
enter button doesn't work on select boxes
Enter key maping forJSP in MAC PC
form submission using enter key
How to call the action when we press the enter button
How to submit a form from a como box - with enter key