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
sam15Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
	window.onload = function() {
		var inputs = document.getElementById("formId").getElementsByTagName("input");
		for(var i=0;i<inputs.length;i++) {
			inputs[i].onkeypress = function(event) {
				var keyCode = (window.event)?window.event.keyCode:event.which;
				return (keyCode != 13);
			}
		}
	}

Open in new window


test page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
	
	window.onload = function() {
		var inputs = document.getElementById("formId").getElementsByTagName("input");
		for(var i=0;i<inputs.length;i++) {
			inputs[i].onkeypress = function(event) {
				var keyCode = (window.event)?window.event.keyCode:event.which;
				return (keyCode != 13);
			}
		}
	}
	
</script>
</head>
<body>
<form id="formId" onsubmit="alert('going to submit');">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="submit" value="submit" />
</form>
</body>
</html>

Open in new window

0
 
sam15Author Commented:
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?
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
leakim971PluritechnicianCommented:
>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

0
 
sam15Author Commented:
This is more of AJAX. We dont have jquery installed.

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

Any other JS framework?
Else you can loop over each input in the form to set the onkeypress event
0
 
sam15Author Commented:
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
0
 
sam15Author Commented:
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.
0
 
leakim971PluritechnicianCommented:
>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

0
 
leakim971PluritechnicianCommented:
and it work on FF
0
 
sam15Author Commented:
Excellent answer. Function works great!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.