Not sending a form when you press "enter"

[Joshua Beall]

Hi All,

Normally, when you have a web form, and you are typing in an <input
type="text"/>, if you press enter, the form gets submitted.

Is there any simple way to alter this behavior? Besides using JS?

If I have to use JS, any thoughts on what would be the quickest, simplest
way to do this?

Thanks,
-Josh

 

[Jukka K. Korpela]

Normally, when you have a web form, and you are typing in an <input
type="text"/>, if you press enter, the form gets submitted.

More or less so. It's actually quite complicated in the details. It
depends on the form as a whole, and on the browser.

Is there any simple way to alter this behavior?
No.

Besides using JS?

Do you expect to be able to prevent something using JS? Remember that JS
works on some days only, and you don't know which days. It might work on
364 days of the year, but on the 365th day, a prospective customer with
an indecent sum of money just waiting to be wasted will access your page
on a browser with JS disabled.

If I have to use JS, any thoughts on what would be the quickest,
simplest way to do this?

Are you sure you really want that? People who ask for the quickest and
simplest way often get what they ask for, then later come back
complaining it does not really work. "Oh, you didn't say you wanted a
correct answer."

The first thing to deal with is to make sure that your form handler can
deal with premature submissions.

The next thing is to check that it really works.

Then you should double-check it.

Next, ask someone else to check it.

Only after that should you consider additional measures, such as those
discussed at http://www.cs.tut.fi/~jkorpela/forms/enter.html

 

[Michael Wilcox]

Normally, when you have a web form, and you are typing in an <input
type="text"/>, if you press enter, the form gets submitted.

Is there any simple way to alter this behavior? Besides using JS?

Why would you want to alter it? You would be changing the expected
behaviour of the browser and confuse the user.

 

[Joshua Beall]

Why would you want to alter it? You would be changing the expected
behaviour of the browser and confuse the user.

In theory, yes. But it has been my experience that the opposite is true -
users hit enter, either by accident, or expecting to tab to the next field.
Either way, they are not meaning to submit the form.

This of course would not be the case with a technically savvy user, but the
work I am doing right now is for a client whose site will be viewed (almost
exclusively) by the non-savvy. We have reams of partial submissions caused
by the user hitting enter in a text field.

Anyway, I did a little searching and found a piece of JS that works quite
nicely.

 

[Augustus]

In theory, yes. But it has been my experience that the opposite is true -
users hit enter, either by accident, or expecting to tab to the next field.
Either way, they are not meaning to submit the form.

This of course would not be the case with a technically savvy user, but the
work I am doing right now is for a client whose site will be viewed (almost
exclusively) by the non-savvy. We have reams of partial submissions caused
by the user hitting enter in a text field.

Anyway, I did a little searching and found a piece of JS that works quite
nicely.

Its not hard to disable the enter key on a form element with javascript
(though not everybody has javascript enabled on their browser)... the thing
here is to make sure you aren't going with some quickie bandaid fix for your
form when putting a little extra effort could do a much better job
(ie: if they prematurely hit enter and sent the form in, you should procss
it on the server and check all fields for valid input... if the input is
wrong or something is missing then send the user back the form with data and
error message(s) pointing out what they missed)

 

[Michael Wilcox]

In theory, yes. But it has been my experience that the opposite is true -
users hit enter, either by accident, or expecting to tab to the next field.
Either way, they are not meaning to submit the form.

And what if I mean to hit the enter key and nothing happens?

People have survived for years with forms working the same way. Please
don't try to change that.

This of course would not be the case with a technically savvy user

You don't have to be "technically savvy" to know the functions of Tab
and Enter keys with a form.

but the
work I am doing right now is for a client whose site will be viewed (almost
exclusively) by the non-savvy.

Then surely you wouldn't want to confuse them by suddenly changing their
browsers' function?

We have reams of partial submissions caused

by the user hitting enter in a text field.

Then you need to implement some kind of effective server-side (meaning
non-JavaScript) checking system which will allow them a opportunity to
fill in missing fields.

Anyway, I did a little searching and found a piece of JS that works quite
nicely.

Then you've discovered two things:
(1) Arguments against what you're doing
(2) How to search before you post

 

[Joshua Beall]

Its not hard to disable the enter key on a form element with javascript

(though not everybody has javascript enabled on their browser)... the thing
here is to make sure you aren't going with some quickie bandaid fix for your
form when putting a little extra effort could do a much better job
(ie: if they prematurely hit enter and sent the form in, you should procss
it on the server and check all fields for valid input... if the input is
wrong or something is missing then send the user back the form with data and
error message(s) pointing out what they missed)

The problem is, pretty much all the fields are optional. So it is only
"incomplete" if they sent it by accident, and wanted to fill in more of the
fields.

 

[Grahammer]

The problem is, pretty much all the fields are optional. So it is only
"incomplete" if they sent it by accident, and wanted to fill in more of the
fields.

Ugly, but easy fix...

Don't have a submit button. Use a normal button and use javascript to submit
the form when it's clicked.

(and let me know if I'm wrong as I'm trying to get my head around this
stuff.)

 

[Mark Parnell]

Don't have a submit button. Use a normal button and use javascript to submit
the form when it's clicked.

What if the user doesn't use a mouse? What if they don't have Javascript
disabled/unavailable?