• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

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
0
sam15
Asked:
sam15
  • 6
  • 5
1 Solution
 
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
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now