PDA

View Full Version : 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


<script language="javascript">
function send()
{
document.getElementById('from1').submit();
}
</script>

using

<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.
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);
}
<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.
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:
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:


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

An example :


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

Vijaya
09-25-2009, 09:17 AM
Hi i am using the same code(onKeyDown="if(event.keyCode==13) event.keyCode=9;") in body tag of master page,so that it is applicable to all controls in the form instead of writing onkeydown for each and every control.If i am using the above js function(noEnterSubmit()) there is javascript error 'HTMLFormElement' is undefined.

Jesdisciple
09-26-2009, 02:39 AM
Ack! I thought I replied to this.

Amnesiac: Note that HTML event handlers are generally a bad idea. However, the tab thing is nice.

Vijaya: To use my code (which can work Amnesiac's idea in), please post the output of this:
window.onload = function (){
alert(document.forms.namedItem('aspnetForm').constructor);
};

Vijaya
09-30-2009, 06:04 AM
Ack! I thought I replied to this.

Amnesiac: Note that HTML event handlers are generally a bad idea. However, the tab thing is nice.

Vijaya: To use my code (which can work Amnesiac's idea in), please post the output of this:
window.onload = function (){
alert(document.forms.namedItem('aspnetForm').constructor);
};
Thq chris ,problem solved & now there is no javascript error

I replaced

noEnterSubmit('aspnetForm')

with this code

noEnterSubmit(document.forms.namedItem('aspnetForm').constructor);

Jesdisciple
09-30-2009, 06:29 AM
Vijaya, that's a very strange combination of the snippets I posted, and I don't think it can work under any circumstances. Worse yet, it doesn't work in Firefox or Opera. If you'll post the requested output, I can try again to make it work in IE. (I have IE6, but it locks my Linux system.)

Vijaya
09-30-2009, 11:24 AM
Hi chris,it is working means tht there is no javascript error now.prev it is showing the error "HTMLFormElament is undefined".but now there no javascript error.Output of the above javascript funtion is "undefined"

Jesdisciple
10-01-2009, 02:16 AM
The only reason no errors are shown is that the function doesn't try to do anything with the constructor. The second if-statement returns false, and the entire program is rendered useless (might as well not be used at all).

According to Microsoft (http://msdn.microsoft.com/en-us/library/ms535249(VS.85).aspx#ctl00_MTCS_main_ctl04), IE < 8 doesn't have a constructor for form elements (as you observed). Thus MS has gotten us to resort to the archaic C way of doing methods. (Also, I can't get Firefox to do what Amnesiac intended, so I've abandoned that approach.)
function noEnterSubmit(form){
if(typeof form == 'string')
form = document.forms.namedItem(form);
if(typeof form != 'object' || form == null || form.tagName.toLowerCase() != 'form')
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;
}
}
registerEventListener(form, 'keypress', keyListener, true);
registerEventListener(form, 'keydown', keyListener, true);
registerEventListener(form, 'submit', submit, true);
}
function registerEventListener(form, type, listener, useCapture){
if(form.addEventListener)
form.addEventListener(type, listener, useCapture);
else if(form.attachEvent)
form.attachEvent('on' + type, listener);
else
form['on' + type] = listener;
};

Vijaya
12-09-2009, 07:47 AM
Hi chris,
due to the NoEnterSubmission.js file i am unable to raise onPaste event for a textbox in asp.net.can u give any solution for that problem and actually what is the problem

vijaya