How to make onKeyPress work in Firefox to submit form on enter key

**acoder** · Sep 28 '08, 11:57 AM

Post the code that you're using including an example HTML form which reproduces the problem.

**hannie** · Oct 2 '08, 12:45 AM

When use tab to access data fields and press "Enter" on "Next" button to submit form and precess to the next form, it work fine in IE but not in Firefox.

Here are the HTML code for your test:

Page 1: test_server1.ht ml

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>onKeyPre ss bug in Firefox</title>
</head>
<body><h2>Pag e 1</h2>
<form name="form1" method="post" onsubmit="retur n false">
<table width="100%" border="0" cellpadding="0" cellspacing="8" >
<tr>
<td width="15%" nowrap>Version: </td>
<td width="85%"><in put type="text" name="textfield " value="1.00" readonly/></td>
</tr>
<tr>
<td nowrap>Serial Number:</td>
<td><input type="text" name="textfield " value="SN123456 " readonly/></td>
</tr>
<tr>
<td nowrap>Site Name:</td>
<td><input type="text" name="textfield " value=""/></td>
</tr>
<tr>
<td align="center" colspan="2">
<hr />
<input name="btnBack" id="btnBack" type="button" value="< Back" disabled />
<input name="btnNext" id="btnNext" type="submit" value="Next >" onClick='docume nt.location.hre f="test_user1.h tml"' onKeyPress='doc ument.location. href="test_user 1.html"'/>
<input name="btnCancel " type="reset" id="btnCancel" value="Cancel" /> </td>
</tr>
</table>
</form>
</body>
</html>
[/HTML]
Page 2: test_user1.html

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>onKeyPre ss bug in Firefox</title>
</head>
<body><h2>Pag e 2</h2>
<form name="form1" method="post" action="" onsubmit="retur n false">
<table width="100%" border="0" cellpadding="0" cellspacing="8" >
<tr>
<td width="15%">Use rname:</td>
<td width="85%"><in put type="text" name="username" value="admin" readonly /></td>
</tr>
<tr>
<td nowrap>Email Address:</td>
<td><input type="text" name="textfield 3" /></td>
</tr>
<tr>
<td align="center" colspan="2">
<hr />
<input name="btnBack" id="btnBack" type="button" value="< Back" onClick='docume nt.location.hre f="test_server1 .html"' onKeyPress='doc ument.location. href="test_serv er1.html"' />
<input name="btnNext" id="btnNext" type="submit" value="Next >" onClick='docume nt.location.hre f="test_dns1.ht ml"' onkeyPress='doc ument.location. href="test_dns1 .html" ' />
<input name="btnCancel " type="reset" id="btnCancel" value="Cancel" />
</td>
</tr>
</table></form>
</body>
</html>
[/HTML]
Page 3: test_dns1.html

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>onKeyPre ss bug in Firefox</title>
</head>
<body><h2>Pag e 3</h2>
<form name="form1" method="post" action="" onsubmit="retur n false">
<table width="100%" border="0" cellpadding="0" cellspacing="8" >
<tr>
<td width="15%" nowrap>Primary DNS:</td>
<td width="85%"><in put type="text" name="textfield " value="" /></td>
</tr>
<tr>
<td nowrap>Secondar y DNS:</td>
<td><input type="text" name="textfield " value="" /></td>
</tr>
<tr>
<td>Domain:</td>
<td><input type="text" name="textfield " value="" /></td>
</tr>
<tr>
<td align="center" colspan="2">
<hr />
<input name="btnBack" id="btnBack" type="button" value="< Back" onClick='docume nt.location.hre f="test_user1.h tml"' onKeyPress='doc ument.location. href="test_user 1.html"'/>
<input name="btnNext" id="btnNext" type="submit" value="Next >" onClick='docume nt.location.hre f="test_datasto re1.html"' onKeyPress='che ckEnter(e)'/>
<input name="btnCancel " type="reset" id="btnCancel" value="Cancel" /> </td>
</tr>
</table>
</form>
</body>
</html>
[/HTML]------------------------------------------------------------------------------------------------------------------

I tried to use javascript for onKeyPress but it does not work at all in Firefox:

Code:

function EnterKey(e)
{
     var key;

     if(window.event)
          key = window.event.keyCode;     //IE
     else
          key = e.which;     //firefox

     if(key == 13)
          return true;
     else
          return false;
}

**acoder** · Oct 2 '08, 01:03 PM

In the second file, you have:

Code:

<input name="btnBack" id="btnBack" type="button" value="&lt; Back" onClick='document.location.href="test_server1.html"' onKeyPress='document.location.href="test_server1.html"' />
                    <input name="btnNext" id="btnNext" type="submit" value="Next &gt;" onClick='document.location.href="test_dns1.html"' onkeyPress='document.location.href="test_dns1.html" ' />                    
                    <input name="btnCancel" type="reset" id="btnCancel" value="Cancel" />

If you press tab while focused on the back button, it will immediately trigger onkeypress which will go back. Try leaving as is without any key press checks and see that it goes to the correct location. You can also go to the next button location by pressing enter on the text fields.

**hannie** · Oct 2 '08, 09:20 PM

It's works and the "Enter" key on "Previous" button works in Firefox too without "onKeyPress " as in IE. Thank you a fortune;-). You save me lots of time.

It was first time I posted a bug on Bytes.com and I got the answer from you so quickly. You are a Javascript super star!

Best wishes.

Hannie

**acoder** · Oct 2 '08, 09:47 PM

You're welcome. Glad to see that it's working :) Post again if you have more questions and we'll see what we can do.

How to make onKeyPress work in Firefox to submit form on enter key

How to make onKeyPress work in Firefox to submit form on enter key

Comment

Comment

Comment

Comment

Comment