Solved

set the enterkey focus to my search button

Posted on 2006-11-03
11
1,812 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Tag Manager - Add Trigger Using Div class 22 58
Visual Studio npm 1 29
Timer on div 5 24
Table doesn't show the lines! 3 24
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

749 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