Submitting a Form Using Enter in Netscape

By Brian Rhee

This article is a follow-up from Brian's earlier article, Incompatibilities in IE and Netscape: HTML & Javascript

- continued -

Since I posted that little article the other day about the inconsistencies between IE and Netscape, I have received many e-mails of high praise and thanx (yes I spell it this way)... So thank you for your kind words of appreciation.

However, I did not expect to be asked by so many people regarding the script with the submit button/image in Netscape.

So here is some sample code to help you along your way. This script is very simple and shouldn't be a problem for anyone to implement.

<form name="myPanel" action="aaaArea.asp" method="Post"> <input type="text" name="myText" value=""> <input type="text" name="yourText" value=""> <input type="submit" name="mySubmit" value="Submit"> </form> <script Language="JavaScript"> var isNetscape = false; var isIE = false; var isWhoKnows = false; //This determines which browser the user is using if (parseInt(navigator.appVersion) >= 4) { if(navigator.appName == "Netscape") { isNetscape = true; }else if (navigator.appName == "Microsoft Internet Explorer"){ isIE = true; }else { isWhoKnows = true; } } //This stuff captures the events of the user if(isNetscape) { document.captureEvents(Event.KEYUP); } document.onkeyup = checkValue function checkValue(evt){ var theButtonPressed; if (isNetscape) { //if(evt.target.type == "text"){ //--> you can specify which type of element // you want this to trigger for //if(evt.target.name == "myText"){ //--> or you can specify the actual name of // the element theButtonPressed = evt.which; //} }else if(isIE) { //if (window.event.srcElement.type == "text") { //--> same as above, but for IE theButtonPressed = window.event.keyCode; //} }else if(isWhoKnows) { alert("Please hit the submit button to process form"); } if (theButtonPressed == 13) { document.myPanel.submit(); } } //This little script is the key to all the submitting...As you //can see it can be highly customized to allow you to do whatever //you want! I leave it up to your own imagintation to figure out //what else you can do with it. //Happy programming!!! </script>

Download the source code in text format

BTW: I have received a couple of e-mails by people who have written code similar to this but instead of submitting the information they fire a text box first to notify the user of errored or blank fields. Under Netscape, if you were to simply use the code I have written the message box pops up but it repetedly pops if you try to close the alert box using the "enter" key, in IE this is not a problem. So the way to solve this problem is to specify where, or rather which, element in your form you want this "return" submit to work with. The code above shows you how to do this by setting some additonal conditional statements using the evt.target.type and evt.target.name.

BTW2: This code is highly configurable and as you can see I have isolated the event that occurs when one hits the "enter" key. Instead of submitting a form you can focus on an image, or send the user to another url, or do some inline processing in the page to calculate totals or something...Hope these ideas seed your brain with the endless possibilities...

One last thing: I have also written a kewl (yes I spell it like that) little index search script using ASP and JavaScript...Like the one you can find in the index help search menu of any Microsoft program. I found it very handy for searching through large list boxes. The code is fairly long but very simple, however it would take me some time to write an article about it. So if enough people are interested please post to the 4GuysFromRolla message board under WANNA SEE MY INDEX SEARCH SCRIPT.

Happy Programming!

Download the source code in text format