Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Coding for Enter Key - Gecko Browsers

Posted on 2006-06-20
7
Medium Priority
?
285 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;
      }
}
0
Comment
Question by:dylanone
[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
  • 4
  • 3
7 Comments
 
LVL 25

Expert Comment

by:devic
ID: 16942002
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
     }
0
 

Author Comment

by:dylanone
ID: 16969405
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?
0
 
LVL 25

Expert Comment

by:devic
ID: 16969454
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.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:dylanone
ID: 16969661
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>
0
 
LVL 25

Accepted Solution

by:
devic earned 400 total points
ID: 16969910
=================================================
function KeyDownHandler(e)
{
      var keyCode = window.event?window.event.keyCode:e.which;
         if(keyCode == 13)
         {
            //location.href = '/searchresults.asp?qu=' + document.forms[0].qu.value;
            location.href = 'http://www.sembel.net/tools/q.php?qu=' + document.forms[0].qu.value;
            return false;
      }
      return true;
}
=================================================


and

 
=================================================
<input type="text" size="12" class="search" id="qu" name="qu"
 onClick="this.value=''" onKeyDown="return KeyDownHandler(event)"><br>
=================================================
this what you wanted?
0
 

Author Comment

by:dylanone
ID: 16970135
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!  
0
 
LVL 25

Expert Comment

by:devic
ID: 16970254
because you are declared onkeydown only for the input box. To control all the form you need:

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

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

618 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