Solved

set the enterkey focus to my search button

Posted on 2006-11-03
11
1,815 Views
Last Modified: 2012-06-27
I have an ASP.Net 1.1 web app that uses forms authentication.

In one screen I have a database search form. I have some javascript on the form that directs the enter key focus to my search button. Without it the first button on the page, in this case a logout button, gets triggered by the enter key.

My javascript works fine in IE7 but not in Firefox 2.

Here's the javascript:

<SCRIPT LANGUAGE="javascript">
function testForEnter(){    
      if (event.keyCode == 13) {  
            event.returnValue=false;
            event.cancel=true;

            if (document.getElementById('MySearchLinkButton') != null){
                  document.getElementById('MySearchLinkButton').click();
            }
      }
</SCRIPT>

And my form tag looks like this:

<form id="Form1" onkeydown="testForEnter();" method="post" runat="server">

I need advice on how to modify this to work with Firefox properly.
0
Comment
Question by:jrogovsky
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
11 Comments
 
LVL 3

Expert Comment

by:aflat362
ID: 17870380
what are you trying to achieve?

Do you have multiple buttons on your form?

Is the problem that without this script, the enter key automatically submits the form?

If you are simply trying to prevent the enter key from submitting your form change the type of the "submit" button to be of type "button"
and submit the form after the button is clicked.


<html>
<head>
<script language="javascript">
function SubmitTest() {
document.form1.submit();
}
</script>
</head>
<body>
<form name="form1"onSubmit="return false;">
<input type="text" name="text1">
<input type="button" name="button1" value="submit" onclick="SubmitTest()">
</form>
</body>
</html>

0
 

Author Comment

by:jrogovsky
ID: 17870492
Sorry,

Maybe I wasn't clear.

I do have multiple buttons on the form.

Without the javascript the enter key ends up invoking the "sign out" button, I guess because it is the top most element that can receive focus.

I'm trying to redirect the enter key focus to my "execute search" button. The form has several different render modes so I've included that little "!=null" check to ensure that I only try to invoke the search button when it is visible.

The javascript I supplied works just fine in IE. It doesn't work in FF. Firefox's error console throws the following error: "event has no properties".
0
 
LVL 9

Accepted Solution

by:
pallosp earned 500 total points
ID: 17870666
<body onload="document.getElementById('Form1').onkeydown=testForEnter">

<SCRIPT LANGUAGE="javascript">
function testForEnter(e) {
     // Mozilla
     if (e && e.keyCode==13) {
          e.preventDefault();
          if (document.getElementById('MySearchLinkButton') != null){
            document.getElementById('MySearchLinkButton').click();
          }
     }
     // IE
     if (event && event.keyCode==13) {
          event.returnValue=false;
          event.cancel=true;
          if (document.getElementById('MySearchLinkButton') != null){
            document.getElementById('MySearchLinkButton').click();
          }
     }
}
</SCRIPT>

<form id="Form1" method="post" runat="server">
<input type=button id=MySearchLinkButton>
</form>

</body>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 3

Expert Comment

by:aflat362
ID: 17870691
>>Without the javascript the enter key ends up invoking the "sign out" button, I guess because it is the top most element that can receive focus.


Without the javascript the enter key will trigger the topmost "SUBMIT" button in your form.

If you change all the buttons to type "BUTTON" the enter key will do nothing.

Change the types to buttons and use javascript like I showed in my example to submit the form when you click the button.

Does this solve the problem?
0
 

Author Comment

by:jrogovsky
ID: 17870837
Thanks all...

@aflat362, All my buttons are asp.net controls. I can't change the way the ASP.Net service is rendering their HTML. Do you have any other ideas?

@pallosp, I tried your suggestion and although IE is still working correctly FF is throwing a new error:
"document.getElementById("MySearchLinkButton").click is not a function"

I should mention that my "execute search" button is an asp.net linkbutton. It renders to HTML as an <a> tag. Perhaps there's a different method I can call, one other than "click();" to invoke an <a> tag in FF?

0
 
LVL 9

Expert Comment

by:pallosp
ID: 17871042
Try calling onclick() instead of click(). It's supported by both browsers.
0
 

Author Comment

by:jrogovsky
ID: 17871078
Same problem with "onclick();".

Any more suggestions? I feel that we're very close...
0
 
LVL 9

Expert Comment

by:pallosp
ID: 17871194
I have believed that the the postback function is called from the onClick event handler but I've just realized that the href attribute is responsible for it.

It's not a beautiful solution but probably works. So far I don't have another idea.
eval(document.getElementById('MySearchLinkButton').href);
0
 

Author Comment

by:jrogovsky
ID: 17871215
hehe,

I'd just now figured out the try something very similar!

This is what I used:

window.location.href=document.getElementById('ManagePAXAccounts1_cmd_Search').href;

And it works!!!

Is it cleaner for me to use "eval" instead of "window.location.href"?
0
 
LVL 9

Expert Comment

by:pallosp
ID: 17872420
No, your solution is better.
I didn't know this trick, the eval was just a hack.
0
 

Author Comment

by:jrogovsky
ID: 17872426
ok, thank you very much for your help!
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month10 days, 10 hours left to enroll

632 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question