set the enterkey focus to my search button

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.
jrogovskyAsked:
Who is Participating?
 
pallospConnect With a Mentor Commented:
<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
 
aflat362Commented:
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
 
jrogovskyAuthor Commented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
aflat362Commented:
>>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
 
jrogovskyAuthor Commented:
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
 
pallospCommented:
Try calling onclick() instead of click(). It's supported by both browsers.
0
 
jrogovskyAuthor Commented:
Same problem with "onclick();".

Any more suggestions? I feel that we're very close...
0
 
pallospCommented:
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
 
jrogovskyAuthor Commented:
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
 
pallospCommented:
No, your solution is better.
I didn't know this trick, the eval was just a hack.
0
 
jrogovskyAuthor Commented:
ok, thank you very much for your help!
0
All Courses

From novice to tech pro — start learning today.