469,331 Members | 4,122 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,331 developers. It's quick & easy.

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

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
5 21692
acoder
16,027 Expert Mod 8TB
Post the code that you're using including an example HTML form which reproduces the problem.
Sep 28 '08 #2
hannie
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
16,027 Expert Mod 8TB
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
hannie
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
16,027 Expert Mod 8TB
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.

Similar topics

6 posts views Thread by CJM | last post: by
5 posts views Thread by Dennis Allen | last post: by
2 posts views Thread by mattgarvin | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by haryvincent176 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.