Form is submitted twice when Enter key is pressed twice

Romil · 04-26-2006, 06:08 AM

I've to capture user's Enter key press, so that an HTML button click can be simulated on event of Enter key press. This is how I do it:

<script language="javascript" type="text/JavaScript"">
var submitBtnObj = document.getElementsByName("saveButton"); // Button whose click has to be simulated on keypress

document.onkeypress = keyPress;

//This function will be called whenever a key is pressed
function keyPress(d) {
key = event.keyCode;
if(key==13) { //For Enter key
submitBtnObj[0].click();
}
}
</script>

The Problem: This works fine when on press of enter key, the button click is simulated. Hence if there is a javascript function that has to be called "onclick" of button it will be called. If the button type is "submit" the form is submitted. The problem is if "user" presses "Enter" key twice (say in quick succession) the button click is simulated twice. Hence if the button is submit, the form will be submitted twice. This happens only in IE (I have ver 6.0) and not in Mozzilla Firefox or Netscape Navigator.

beefa · 04-26-2006, 08:34 AM

Romil,

First off, a warm welcome to the forums.

Your problem certainly is a troublesome one. I think, however, I have the answer.

Slowing things down a bit, lets analyse the situation. Users are pressing enter twice rapidly. The browser will only run the script once after the other, and not at the same time. That means it will run the code, then run it again.

What we could do is after the submission has been activated, we disable the enter key. The script is run, it sees that the enter key has been pressed, it then submits the form, then disables the enter key. When it runs it again, it sees the enter key is disabled, and then does nothing, thus submitting the form once.

We can do this by setting a variable. Its much easier to set variables then it is to disable the key completely (and its also safer). Here is your new code:

Code:

<script language="javascript" type="text/JavaScript"">
var submitBtnObj = document.getElementsByName("saveButton");
document.onkeypress = keyPress;
var count = 1;
function keyPress(d) {
if (count == 1){
key = event.keyCode;
if(key==13) { //For Enter key
submitBtnObj[0].click();
var count=2;
}
}
}
</script>

In theory it should work, good luck!

Hope this helps,
Beefa