By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,848 Members | 3,202 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,848 IT Pros & Developers. It's quick & easy.

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

P: 4
onKeyPress does not work in Firefox. If use tab to navigate each field and press "Enter" on "Next" button to submit form and process to the next form / page, IE works well even if without onKeyPress code. However, Firefox supresses onKeyPress on submit when "Enter" key is pressed.

e.which and code="13" does not work for submit button at all in Firefox nor by changing code to focus().

e.g. use tab to navigate each field, when tab goes from "Previous" to "Next" button, it kicks to the previous page in Firefox before even I press "Enter" key. So the "Cancel" button on the right of "Next" is never be reached in Firefox.

Does any javascript expert have solution?

Thanks in advance.

Hannie
Sep 26 '08 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
Post the code that you're using including an example HTML form which reproduces the problem.
Sep 28 '08 #2

P: 4
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.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>onKeyPress bug in Firefox</title>
</head>
<body><h2>Page 1</h2>
<form name="form1" method="post" onsubmit="return false">
<table width="100%" border="0" cellpadding="0" cellspacing="8">
<tr>
<td width="15%" nowrap>Version:</td>
<td width="85%"><input 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="&lt; Back" disabled />
<input name="btnNext" id="btnNext" type="submit" value="Next &gt;" onClick='document.location.href="test_user1.html"' onKeyPress='document.location.href="test_user1.htm l"'/>
<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>onKeyPress bug in Firefox</title>
</head>
<body><h2>Page 2</h2>
<form name="form1" method="post" action="" onsubmit="return false">
<table width="100%" border="0" cellpadding="0" cellspacing="8">
<tr>
<td width="15%">Username:</td>
<td width="85%"><input type="text" name="username" value="admin" readonly /></td>
</tr>
<tr>
<td nowrap>Email Address:</td>
<td><input type="text" name="textfield3" /></td>
</tr>
<tr>
<td align="center" colspan="2">
<hr />
<input name="btnBack" id="btnBack" type="button" value="&lt; Back" onClick='document.location.href="test_server1.html "' onKeyPress='document.location.href="test_server1.h tml"' />
<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" />
</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>onKeyPress bug in Firefox</title>
</head>
<body><h2>Page 3</h2>
<form name="form1" method="post" action="" onsubmit="return false">
<table width="100%" border="0" cellpadding="0" cellspacing="8">
<tr>
<td width="15%" nowrap>Primary DNS:</td>
<td width="85%"><input type="text" name="textfield" value="" /></td>
</tr>
<tr>
<td nowrap>Secondary 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="&lt; Back" onClick='document.location.href="test_user1.html"' onKeyPress='document.location.href="test_user1.htm l"'/>
<input name="btnNext" id="btnNext" type="submit" value="Next &gt;" onClick='document.location.href="test_datastore1.h tml"' onKeyPress='checkEnter(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:

Expand|Select|Wrap|Line Numbers
  1. function EnterKey(e)
  2. {
  3.      var key;
  4.  
  5.      if(window.event)
  6.           key = window.event.keyCode;     //IE
  7.      else
  8.           key = e.which;     //firefox
  9.  
  10.      if(key == 13)
  11.           return true;
  12.      else
  13.           return false;
  14. }
Oct 2 '08 #3

acoder
Expert Mod 15k+
P: 16,027
In the second file, you have:
Expand|Select|Wrap|Line Numbers
  1. <input name="btnBack" id="btnBack" type="button" value="&lt; Back" onClick='document.location.href="test_server1.html"' onKeyPress='document.location.href="test_server1.html"' />
  2.                     <input name="btnNext" id="btnNext" type="submit" value="Next &gt;" onClick='document.location.href="test_dns1.html"' onkeyPress='document.location.href="test_dns1.html" ' />                    
  3.                     <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.
Oct 2 '08 #4

P: 4
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
Oct 2 '08 #5

acoder
Expert Mod 15k+
P: 16,027
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.
Oct 2 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.