Suppress submit button from responding to 'Enter' key

**sisyphus** · 06-20-2009, 01:41 AM

i have a form with a textfield and a submit button. for some reason, i do want the submit button responses to the 'Enter' key when the user press 'Enter' when the focus is in the textfield. Is there anyway to do so?

thanks a lot.

**thetestingsite** · 06-20-2009, 02:10 AM

You would want to use Javascript to accomplish this. I don't have a code snippet at the moment, but you should be able to find one easily by doing a search through the forums.

Hope this helps.

**noorahmad** · 06-20-2009, 11:26 AM

you can use javascript

PHP Code:


<script language="javascript">

function send()

{

    document.getElementById('from1').submit();

}

</script>

using

HTML Code:

<button name="button" id="button" value="Submit" onClick="javascript: send()" />Login

**Jesdisciple** · 06-20-2009, 09:55 PM

noorahmad, I think the OP was intending the opposite of what you accomplished. See the thread title.

This script cancels the submission if it was triggered by the enter key. An example is provided below. (I don't really like the name, but it's the best I could come up with.)

EDIT: Woops, it actually doesn't work. I could have sworn it did.

Code:

function noEnterSubmit(form){
	if(typeof form == 'string'){
		form = document.forms.namedItem(form);
		if(form == null)
			return false;
	}
	var enter = false;
	function keyEvent(event){
		event = event || window.event;
		enter = (event.keyCode || event.charCode) == 13;
	}
	function submit(){
		if(enter){
			enter = false;
			return false;
		}
	}
	var events = ['keypress', 'keydown'];
	for(var i = 0; i< events.length; i++){
		if(form.addEventListener)
			form.addEventListener(events[i], keyEvent, true); 
		else if(form.attachEvent)
			form.attachEvent('on' + events[i], keyEvent);
	}
	if(form.addEventListener)
		form.addEventListener('submit', submit, true); 
	else if(form.attachEvent)
		form.attachEvent('onsubmit', submit);
}

Code:

<html>
	<head>
		<title>No-Enter Submission</title>
		<script type="text/javascript" src="NoEnterSubmission.js"></script>
		<script type="text/javascript">
			window.onload = function (){
				noEnterSubmit('test');
			};
		</script>
	</head>
	<body>
		<form method="get" id="test">
			<input type="text">
			<input type="submit">
		</form>
	</body>
</html>

**Jesdisciple** · 06-20-2009, 11:59 PM

I found why it didn't work. I had initially used the old event registration model, and then moved to the new one. At first, I didn't know how to cancel the event using the new model, but I finally found it. So here's a standard solution which is backwards-compatible with the old model.

Code:

function noEnterSubmit(form){
	if(typeof form == 'string')
		form = document.forms.namedItem(form);
	if(typeof form != 'object' || form == null || form.constructor != HTMLFormElement)
		return false;
	var enter = false;
	function keyListener(event){
		event = event || window.event;
		enter = (event.keyCode || event.charCode) == 13;
	}
	function submit(event){
		if(enter){
			event = event || window.event;
			event.preventDefault();
			enter = false;
			return false;
		}
	}
	form.registerEventListener('keypress', keyListener, true);
	form.registerEventListener('keydown', keyListener, true);
	form.registerEventListener('submit', submit, true);
}
HTMLElement.prototype.registerEventListener = function(type, listener, useCapture){
	if(this.addEventListener)
		this.addEventListener(type, listener, useCapture);
	else if(this.attachEvent)
		this.attachEvent('on' + type, listener);
	else
		this['on' + type] = listener;
};

**Jesdisciple** · 06-21-2009, 12:55 AM

Just a note for anyone who read my last post before I updated it. I found the standard way to cancel the event, so use the current code.

**Vijaya** · 09-17-2009, 06:54 AM

Thq Chris,the above code is working fine,but the is a javascript error 'HTMLFormElement' is undefined.

**Jesdisciple** · 09-17-2009, 01:22 PM

Hi Vijaya. Which browser and version are you using? Also, please give the output of the following function in the same page, with the same argument as the other function:

Code:

function test(form){
	if(typeof form == 'string')
		form = document.forms.namedItem(form);
	alert(form.constructor);
}

**Vijaya** · 09-24-2009, 09:44 AM

Hi chris,
I am using IE6 and i am working with master pages,In master page i am calling the function as
window.onload = function (){noEnterSubmit('aspnetForm');};

**forum_amnesiac** · 09-25-2009, 06:05 AM

An easy way to stop this is to convert the use of the Enter button in to a Tab for each input field.

All you need to do is to add this code to each input field:

HTML Code:

onKeyDown="if(event.keyCode==13) event.keyCode=9;"

An example :

HTML Code:

<input type="text" name="name" size="35" id="name" onKeyDown="if(event.keyCode==13) event.keyCode=9;" />

Thread: Suppress submit button from responding to 'Enter' key

Thread Tools

Search Thread

Suppress submit button from responding to 'Enter' key

The Following User Says Thank You to Jesdisciple For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions