Solved

set the enterkey focus to my search button

Posted on 2006-11-03
11
1,809 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
  • 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
Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

 
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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write 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…

777 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