Link to home
Start Free TrialLog in
Avatar of sam15
sam15

asked on

BlockEnterKeyHTML Formss.

I want to block "Enter Key" from submitting on order form that has 30 fields.
Users keep hitting Enter to navigate to next field and form submits.

What is the standard way of doing this?

is it only possible using javascript and done at each field level as described here

http://www.cs.tut.fi/~jkorpela/forms/enter.html
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Avatar of sam15
sam15

ASKER

so do i do it at the "Field" level for every field?

It cant be done at the form level?

Woud the javascript work with most browsers too?
>Woud the javascript work with most browsers too?

Using jQuery, for all inputs in the form with the id "formID" :

$("input", "#formID").keypress(function (evt) {
   var charCode = evt.charCode || evt.keyCode;
   if(charCode  == 13) evt.preventDefault();
});

Open in new window

Avatar of sam15

ASKER

This is more of AJAX. We dont have jquery installed.

it seems i am stuck with Javascript and field level disabling key. right?
>We dont have jquery installed.

Any other JS framework?
Else you can loop over each input in the form to set the onkeypress event
Avatar of sam15

ASKER

no we are not using any frameworks.

DO you mean setting the loop in Javascript? any samples.

I was thinking of going toeach element and adding the javascript function call to disable the Enter key
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sam15

ASKER

it seems to work in IE. i need to test with firefox.

The form does not submit though when you press "submit".

I orignally thought that you have to submit via a javascript button to run javascript validation before submitting.
>The form does not submit though when you press "submit".
 
You mean with the ENTER key?
If you want to allow it :


window.onload = function() {
		var inputs = document.getElementById("formId").getElementsByTagName("input");
		for(var i=0;i<inputs.length;i++) {
if( inputs[i].type != "submit" ) {
			inputs[i].onkeypress = function(event) {
				var keyCode = (window.event)?window.event.keyCode:event.which;
				return (keyCode != 13);
			}
}
		}
	}

Open in new window

and it work on FF
Avatar of sam15

ASKER

Excellent answer. Function works great!