Simple (?) HTML forms questions

re

Either push your submit through javascript so that checks are made on all the inputs or use a focus method on click.

Re: Sorted

> Syntax is javascript: not java_script_: Why do all the refs
> on internet say java_script_:

they dont all say it at all!!!

AtW in "coding in JavaScript since 1996" enhanced protected mode

Sorted

Using link as previous. Syntax is javascript: not java_script_: Why do all the refs on internet say java_script_: ? Oh well can't make it too easy for the novices I suppose. Ta for all comments.

.....

zzzzzzzzzzzzzz

Milan.

I think you're lost, Milan - this is the Technical Forum!

Does this help?

www.cs.tut.fi/~jkorpela/forms/enter.html

 
This document discusses client-side scripting issues related to the problem that hitting ENTER in a text input field in an HTML form has rather different effects on different browsers. For a fundamental discussion of the topic, see Submit form by hitting ENTER? by Alan Flavell. What we discuss here is attempts to prevent or trigger (depending on the nature of the form) such submission in some cases, to improve the situation for some users.

Note: This document was written when the main problem was Internet Explorer's behavior of submitting a form when hitting ENTER in a text input box. Unfortunately that behavior now appears e.g. in Opera 6 and Mozilla 1.0 too, and the method suggested here might not be effective against that.

Prevent ENTER from submitting
Normally when you have a form with several text input fields, it is undesirable that the form gets submitted when the user hits ENTER in a field. People often do that by accident or because they are accustomed to terminate field input that way. If a browser (we are in practice discussing Internet Explorer here) regards hitting ENTER in a text input field as a request to submit the form immediately, there is no sure way to prevent that. But the author can help some users (namely those who have JavaScript enabled) by doing as follows: 

Include the following element into the head part of your document: 
<script type="text/javascript"><!--
function noenter() {
  return !(window.event && window.event.keyCode == 13); }
//---</script>
Add the following attribute into each input type="text" tag(s) in your form:
onkeypress="return noenter()" 
This works simply so that if the user hits ENTER and if that would trigger form submission on the browser, then (if JavaScript is enabled) the onkeypress attribute causes form submission to be aborted, since it executes a return statement with value false.

Demonstration: On IE 4+, a form like the following would normally get submitted when the user hits ENTER in either text input field. But here we have added JavaScript as above to prevent that. 

 

One might think that a simpler approach would work: define a JavaScript variable, say submitOK, and initialize it to false; use onsubmit="return submitOK" in the form tag; and use onclick="submitOK=true" in the submit button(s). However, this does not work. When a user hits ENTER in a text input field, IE behaves as if the submit button had been used! (You can see this if you add e.g. alert('Hello world') into the code in the onclick attribute.)

You might alternatively do something more complicated, so that hitting ENTER acts as tabbing, i.e. takes the user to the next field. This takes some more coding, and it might teach users bad habits - they would have problems with other pages if they accustomed to using ENTER for tabbing! - but here's a demo anyway (peek at the source code to see how it has been done): 
 

Make ENTER submit
Less frequently, we might wish to try to make ENTER in a text input field act as a submit request, on browsers where that does not normally happen. Remember that this cannot be guaranteed. You should thus always include a submit button anyway. (I have been reported that the method presented here does not work on a Linux version of Netscape. And naturally it cannot work when client-side scripting is disabled.)

As an example of a form where such behavior could make sense is the Google Advanced Search form. It can be convenient to just fill out one field and terminate it with enter, to send a query with other fields defaulted.

An obvious attempt is to modify our simple JavaScript code e.g. as follows: 

function entsub(myform) {
  if (window.event && window.event.keyCode == 13)
    myform.submit();
  else
    return true;}
and use onkeypress="return entsub(this.form)" in the input type="text" tags. This however would be rather uninteresting, since it would basically work only on IE 4+, which behaves by default the way we prefer here.

So this would be a case for considering the use of Netscape-specific methods, since Netscape is probably the main concern in this context. Using the event object, we would write the entsub() function as follows: 

function entsub(event,ourform) {
  if (event && event.which == 13)
    ourform.submit();
  else
    return true;}
and we would use the attribute onkeypress="return entsub(event,this.form)" in each input type="text" element. Demonstration:

Re: buttons

zzzzzzzzzzzzzz

Milan.

Try this...

{INPUT TYPE="submit" onKeyDown="if(event.keyCode==13) event.keyCode=9;" Value="Submit"}

?? Haven't tried it, but should work - it converts an Enter to a Tab

make the

button a 'normal' button, not a 'submit' button then javascript etc etc

Re: buttons

Not so simple it seems! Looked on net, various suggestions and they all seem to have drawbacks, not work in all browsers etc. Simplest is just to use a picture or text link instead of submit button:

submit

Changed formname to name of my form and it don't work unfotunately,just get page unavailable.Is that the right syntax? Really must get a better Javascript book.

PS I shall try that capnG despite Atw's ffs's. Ta.

PPS Read kbd is 08 int it?

PPPPPS No don't work. Might be ok if form action was different. For some reason when form action is php, onSubmit actions seem to be ignored. FKW.

buttons

ffs stop fking around with specific keyboard keys - onSubmit event was specifically designed to catch _all_ submissions

you might as well suggest intercepting interrupt 9 (keyboard) and getting data from there ffs

Yes but

Not quite what I was getting at Dim. The input is already validated to ensure mandatory fields are filled in and email address is ok. Otherwise it gives a message and does not submit, but

a) Message about things that are not filled in is itself a bit irritating if user did not intend to submit.

b) Even if everthing has a value that should have a value submit should still only be by intent, user might want to check through and alter things before submitting.

Check box sorts this but wondered of there was some neater way like making the button not respond to enter.

Thinks! If you had an onClick event (or whatever it's called in Javascript) on the button would it do that before onSubmit or after?. If before you could set a flag to say submit was by mouse and not enter.

lots of ways to do this

Illegal javascript event tags or url parameters detected.


sob - all my code gone....

Xog,

What you are saying (I guess) is that some fields are optional and some mandatory.

You want to make sure the minimum are filled before the form is submitted.

Best way is to add a JS handler to the onSubmit event of the form and check that all the required fields contain text.

If you return false from your handler, the form will not be submitted.

That way a dumb user pressing enter will not submit the form until all the reqd info has been entered.

Hope this is what you are looking for.

DP

Best way to stop a form being inadvertently submitted by user pressing the enter key instead of tabbing/mousing to next field?

Have an "Are you ready to submit?" checkbox and check with onSubmit I suppose but any neater ways?