Form submission

[daveWho]

This was posted in HTML. It was suggested that this might be the more appropriate forum. Apologies for x-post.

On a form, if someone hits the "Enter" key after filling in a text field then the form gets submitted. Is there any way to prevent the "Enter" key from submitting (except where the submit button has the focus)?

I have tried various combinations of onClick and onKeypress, manipulating this.value, and also the value of a hidden field.

All to no avail.

Anybody able to help?

[Vladdy]

The right way of approaching the problem is to use form's onsubmit event to verify that there are no empty fields in the form (at least none that you care about). As you parse through the form elements and you encounter an empty field you can just set focus to it, thus from the user prospective hitting enter key at any text field (but last) will just bring them to the next one as if they hit "Tab".
Any attempts to disable "Enter" key will make your form inaccessible to those who do not use mouse.

[daveWho]

Originally posted by Vladdy
The right way of approaching the problem is to use form's onsubmit event to verify that there are no empty fields in the form (at least none that you care about). As you parse through the form elements and you encounter an empty field you can just set focus to it, thus from the user prospective hitting enter key at any text field (but last) will just bring them to the next one as if they hit "Tab".
Any attempts to disable "Enter" key will make your form inaccessible to those who do not use mouse.



Alas, Any and all fields may be left blank.
Don't necessarily want to disable Enter, just detect which field has focus when they hit it.

[Vladdy]

Originally posted by daveWho
... all fields may be left blank.
Then why do you need such form in the first place :confused: :D :D :D

[DrDaMour]

i found that instead of using the type=submit input, just do some other object, like a type=button value="submit" onclick="formname.submit()" & onpress="formname.submit()", or whatever teh pressevent is maybe it's key down, i forget, sorry... Anyways, i've found (quite by accident) this makes it so that enter anywhere wont' submit teh form.

[daveWho]

Originally posted by Vladdy
Then why do you need such form in the first place :confused: :D :D :D

It is a survey, of approx 300 questions. I'm not going to refuse to accept 299 of of them because someone missed a check-box in Question 173a part iv. I'll take what I can get and be grateful.

[DrDaMour]

he wasn't saying that's what you should do, verify everythign is right, but the scripts taht verify everything is right make it so teh form isn't submitted simple when an enter key is pressed. so they have the same end result, you'd have to change how they get there.

[Vladdy]

Originally posted by daveWho
It is a survey, of approx 300 questions. I'm not going to refuse to accept 299 of of them because someone missed a check-box in Question 173a part iv. I'll take what I can get and be grateful.
Hold on a second. Your initial question was about someone hitting "Enter" after filling a TEXT field. How many text fields are there in your 300 questions survey, 299? (we established that there is one checkbox :D :D ). It takes a very bored or altrustic person to complete such survey.
If the person gets nothing out of this survey and your attitude is "take what I can get" why worry about someone submitting it prematurely at all :confused: :confused:
If the person is interested in completing the survey (like IQ test or whatever) there should be nothing wrong with prompting them about a missed field.

[daveWho]

Originally posted by Vladdy
Hold on a second. Your initial question was about someone hitting "Enter" after filling a TEXT field. How many text fields are there in your 300 questions survey, 299? (we established that there is one checkbox :D :D ). It takes a very bored or altrustic person to complete such survey.
If the person gets nothing out of this survey and your attitude is "take what I can get" why worry about someone submitting it prematurely at all :confused: :confused:
If the person is interested in completing the survey (like IQ test or whatever) there should be nothing wrong with prompting them about a missed field.

Vladdy, the form consists of several multi-choice questions, radio or checkbox. Where one of the choices is "Other" then it is followed by "If other, please specify" in a type=text. There are also name, address, email etc boxes. If someone wants to remain anonymous, it's his right to do so.
My attitude of "take what I can get, and be grateful" doesn't imply that I want to frustrate or confuse the user, and if the form submits before he clearly expects it to then I believe that I have failed in that objective.
And my original question applies whether there are 2 or 200 questions.
I admit I'm stuck, please let's find a technical solution to my question rather than arguing methodologies.

Oh yes, those filling in the survey receive the results of the survey, which has value to them.

[daveWho]

Originally posted by DrDaMour
i found that instead of using the type=submit input, just do some other object, like a type=button value="submit" onclick="formname.submit()" & onpress="formname.submit()", or whatever teh pressevent is maybe it's key down, i forget, sorry... Anyways, i've found (quite by accident) this makes it so that enter anywhere wont' submit teh form.

Thanks, I tried this, but alas the form still submitted from hitting "Enter" when imput type=text had focus.

[DrDaMour]

On a form, if someone hits the "Enter" key after filling in a text field then the form gets submitted. Is there any way to prevent the "Enter" key from submitting (except where the submit button has the focus)?


that IS exactly what you just asked for, isnt' it?

[daveWho]

Originally posted by DrDaMour
that IS exactly what you just asked for, isnt' it?

No, that is exactly waht I'm trying to prevent happening. What I need is that the form submits ONLY when the Submit button is clicked, or when it is tabbed to and "Enter" is hit. Using type="button" with onClick and onKeypress events doesn't prevent the form submitting whenever any type="input" field is tabbed to, and the user hits "enter".

[DrDaMour]

ok you need to clarify what you want because you are making NO SENSE.

you said:
What I need is that the form submits ONLY when the Submit button is clicked, or when it is tabbed to and "Enter" is hit

and then you said with this set up
Thanks, I tried this, but alas the form still submitted from hitting "Enter" when input type=text had focus.

it did what you wanted!

focus is when it's is tabbed to, right?

[DrDaMour]

I just thought of what your problem is, you're including the <input type=button onclick=""> thing within the form aren't you! Sorry for not clarifying that at the begiing, but that <input> tag has to be AFTER the </form> close form tag. the see an example quick


<html>



<body>



<form id="tag" action=tag.cgi method=get target=yes topmargin=0>


<input type=text name=name value="" size="10" >

<input type=text name=email value="" size="10" >
<input type=text name=message value="" size="30" >

</form>

<input type=submit value=¡TAG! onClick="tag.submit()">


</body>
</html>

[Nedals]

I think I understand your problem. When a user enters text in any text box and hits return, your form submits (which you don't want)

Your form probably looks something like this..
<form action="newpage.html">
<input type=text>
...
<input type=submit>
</form>

Change to this (alluded to above) and your problem is solved
<form action="newpage.html">
<input type=text>
....
<input type=button onClick="document.forms[0].submit()">
</form>

[daveWho]

Originally posted by DrDaMour
I just thought of what your problem is, you're including the <input type=button onclick=""> thing within the form aren't you! Sorry for not clarifying that at the begiing, but that <input> tag has to be AFTER the </form> close form tag. the see an example quick


<html>



<body>



<form id="tag" action=tag.cgi method=get target=yes topmargin=0>


<input type=text name=name value="" size="10" >

<input type=text name=email value="" size="10" >
<input type=text name=message value="" size="30" >

</form>

<input type=submit value=¡TAG! onClick="tag.submit()">


</body>
</html>

YES!! you have nailed it!. Thank you.:) :)

[DrDaMour]

i messed with that to nedal, but it seems that the enter key defaults to a input type=button included within the form if there's not submit button. Pretty dumb eh, so again, you have to put the button OUTSIDE the form, then it'll work like a charm.

[Nedals]

daveWho
That <input... > tag outside the <form> tags is WRONG and, althought it may sometimes work in IE, it will NEVER work in NS. You should not do that.

See my post above for the solution.

[Nedals]

it seems that the enter key defaults to a input type=buttonI think you are saying that, if the submit button is ommitted, the enter key will activate the 'type=button'.

It doesn't on my IE6 browser!

[DrDaMour]

nedals, if you look at my earliest posts, that's what i told him to do in teh beginning, but it doesn't work the way we'd expect it to. Like i said enter will default the the input button within teh form. Why wouldn't it work in netscape, is there no support for

form.submit() in ns?

[DrDaMour]

nevermind nedals is right, you should not be using the type=submit. I got confused the right code is as follows



<html>
<body>

<form id="tag" action=tag.cgi method=get target=yes topmargin=0>


<input type=text name=name value="" size="10" >

<input type=text name=email value="" size="10" >
<input type=text name=message value="" size="30" >
<input type=button value=¡TAG! onClick="tag.submit()">

</form>



</body>
</html>

i could have sworn that's what i said to do in the beginning too.....

[Nedals]

Why wouldn't it work in netscape, is there no support for form.submit() in ns?
Netscape will not display form elements unless they are contained within form tags. IE is flawed in that it will.

i could have sworn that's what i said to do in the beginning too.....
You did :) Hence my quote.. Change to this (alluded to above) and your problem is solved

[daveWho]

Originally posted by nedals
daveWho
That <input... > tag outside the <form> tags is WRONG and, althought it may sometimes work in IE, it will NEVER work in NS. You should not do that.

See my post above for the solution.

But it DOES work for me (NS7).

[Nedals]

But it DOES work for me (NS7).
Hmmmm :)
So NS has decided to include the same flaw as IE. I checked out NS7 and it does indeed show the button, but it doesn't do anything on mine. Did it actually submit in your NS7?
NS4 does not display the button.

I guess it's really a mute issue. The bottom line is that form elements should be contained within form tags (though others on this forum may argue the point)

:D :D

[DrDaMour]

i agree with you, and that is what i said to do initially. but i got confused when he continually told me that it wasn't working, but i checked it and the last code i posted does work properly

[daveWho]

Originally posted by DrDaMour
i agree with you, and that is what i said to do initially. but i got confused when he continually told me that it wasn't working, but i checked it and the last code i posted does work properly

Sorry guys, but I stand by what I reported. It doesn't work when button is inside <form..></form..>
But I also agree that it SHOULDN'T work when button is outside. It's always dubious coding to take deliberate advantage of a flaw.

[DrDaMour]

did you change type=submit to type=button that was the mistake i kept making......

again this works perfect in IE:

<html>
<body>

<form id="tag" action=tag.cgi method=get target=yes topmargin=0>


<input type=text name=name value="" size="10" >

<input type=text name=email value="" size="10" >
<input type=text name=message value="" size="30" >
<input type=button value=¡TAG! onClick="tag.submit()">

</form>



</body>
</html>

[daveWho]

Originally posted by DrDaMour
did you change type=submit to type=button that was the mistake i kept making......

again this works perfect in IE:

<html>
<body>

<form id="tag" action=tag.cgi method=get target=yes topmargin=0>


<input type=text name=name value="" size="10" >

<input type=text name=email value="" size="10" >
<input type=text name=message value="" size="30" >
<input type=button value=¡TAG! onClick="tag.submit()">

</form>



</body>
</html>

Hmmm. I wonder if method=get is making the difference. I'm using "post". My code is at www.itworldcanada.com/temp/surveyx.cfm. And it doesn't work.

[DrDaMour]

no it's not post, but i did figure it out.

See isn't that nice of browsers to figure if there is only 1 form element, that an enter autosubmits. just add a seoncd text box, and you'll see taht hitting enter will just make a little beep noise.

That's pretty funny error, but it's YOUR FAult for only having one input :) j/k

[daveWho]

You're right. Having multiple input fields does make a difference. How about we start lobbying W3C to provide "Works with W3C spec" stickers to compliant browsers:D

Thanks to everyone on this thread for their time and effort.