Solved

set the enterkey focus to my search button

Posted on 2006-11-03
11
1,805 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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now