We help IT Professionals succeed at work.

Coding for Enter Key - Gecko Browsers

dylanone
dylanone asked
on
308 Views
Last Modified: 2008-03-10
I'm trying to use the following function so that if a user uses an enter key in a Gecko based browser (FireFox, Netscape, etc) the form is submitted - right now the following doesn't work and I don't see why - I followed several examples I found already:

BTW - I'm calling the function in my form like this:
onKeyDown="EnterKeyDownHandler(event)" thus passing the event object.

function EnterKeyDownHandler(e)
{
      // process only the Enter key
      if ( (event.keyCode == 13) || (e.which.charCode == 13))
      {
      // cancel the default submit
      event.returnValue=false;
      event.cancel = true;
      document.location.href = '/results.aspx;
      return false;
      }
}
Comment
Watch Question

CERTIFIED EXPERT

Commented:
for a form better use this:
=======================
<script>
function SubmitIt()
{
     document.location.href = "http://www.sembel.net/tools/q.php?city=Thessaloniki";
     return false;
}
</script>
<form action="http://www.sembel.net/tools/q.php" onsubmit="return SubmitIt()">
      <input name=city value=Athens>
      <input type=submit>
</form>

In case you need keys manipulation then use like this:
================================
     var keyCode = window.event?window.event.keyCode:e.which;
     if(keyCode == 13)
     {
          //something
     }

Author

Commented:
Interesting item is that when the FireFox browsers has two forms on a page - it won't use the enter key - otherwise it appears all the samples I've seen thus far work. So then is their some magic to dealing with FireFox when it has two forms so that the enter key when selected works?
CERTIFIED EXPERT

Commented:
to be true, I don't really understand what are you talking about. It would be nice to post here what you have and what you want.

Author

Commented:
I think to explain this - the easiest way is to show the URL:

http://www.klng.com/professionals/search.aspx

If you view this in FireFox - if you type in something into the serach box in
the upper right and hit enter it doesn't run the search instead I get the
result set from the form under-neath. Now if you the serach button it works fine!

In the middle of the page - if I enter in a last name and hit the enter key
I get results back -

If I enter in a last last and pick from the drop downs even just from one of the
drop downs and hit enter - nothing happens. Nor does anything happen
if I just select one drop down and hit the enter key.  

Ideally the enter key should run the search if I hit the enter key
Also if I hit the enter key in the serach for a professional I should get results back not matter how many textboxes or drop downs I have selected

Right now this page doesn't show your code which I added in the KeyDownHandler

which on development now looks something like this:

function KeyDownHandler()
                                    
                  {
                              
                  
            var keyCode = window.event?window.event.keyCode:e.which;
                  if(keyCode == 13)
                        
                        {
                        // cancel the default submit
                        event.returnValue=false;
                        event.cancel = true;
                        document.location.href = 'searchresults.asp?qu=' + document.forms[0].qu.value;';
                        return false;
                        }
                              
                  }
                  </script>
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
The only item that still I can't figure out - is why in the professional search selection - if I use any of the drop downs and hit the enter key the pages action isn't fired and so the page just stays where it is - everything else now works great!  
CERTIFIED EXPERT

Commented:
because you are declared onkeydown only for the input box. To control all the form you need:

<form  onKeyDown="return KeyDownHandler(event)"   .......

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.