?
Solved

Using the onkeypress event

Posted on 2006-04-19
6
Medium Priority
?
380 Views
Last Modified: 2012-06-22
In the following code which runs my serach box on the page - I'm trying to make it so that if a users hits say a key on their keyboard say the enter key, the serach fires instead of only working if the user hits the search button - The below code works fine if I hit the serach button but not on the onkeypress event - if say - I hit a keystroke after I type in my serach term.  

document.write('<table border=0 width=768 cellpadding=0 cellspacing=0 valign=bottom><tr bgcolor="#FFFFF"><td valign=top bgcolor="#FFFFFF" rowspan="3"><!--<form name="frmSearchSite" method="get" action="/searchresults.asp">--><input type=text size=12 name="qu" id="quSearch"><input type=image src="/Images/search.jpg" name="search" width="30" height="9" border=0 onclick="window.location.href=\'http://www.mysite.com/searchresults.asp?qu=\'+ document.getElementById(\'quSearch\').value; return false;" onkeypress="onclick="window.location.href=\'http://www.mysite.com/searchresults.asp?qu=\'+ document.getElementById(\'quSearch\').value; return false;"><br><br><!--</form>--> </td></tr><tr><td valign=bottom bgcolor="#FFFFFF" height="51" width="196" colspan="2</td></tr></table>')
0
Comment
Question by:dylanone
  • 3
  • 2
6 Comments
 
LVL 8

Expert Comment

by:KennyTM
ID: 16489036
maybe removing the [onclick="] immediately after [onkeypress="]?
0
 

Author Comment

by:dylanone
ID: 16489126
Even after fixing that - I still get the same behavior - the page still calls itself instead of going to the URL string
0
 

Author Comment

by:dylanone
ID: 16489132
This is what I have now:

document.write('<table border=0 width=768 cellpadding=0 cellspacing=0 valign=bottom><tr bgcolor="#FFFFF"><td valign=top bgcolor="#FFFFFF" rowspan="3"><!--<form name="frmSearchSite" method="get" action="/searchresults.asp">--><input type=text size=12 name="qu" id="quSearch"><input type=image src="/Images/search.jpg" name="search" width="30" height="9" border=0 onclick="window.location.href=\'http://www.mysite.com/searchresults.asp?qu=\'+ document.getElementById(\'quSearch\').value; return false;" onkeypress="window.location.href=\'http://www.mysite.com/searchresults.asp?qu=\'+ document.getElementById(\'quSearch\').value; return false;"><br><br><!--</form>--> </td></tr><tr><td valign=bottom bgcolor="#FFFFFF" height="51" width="196" colspan="2</td></tr></table>')
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 9

Assisted Solution

by:smaccari
smaccari earned 240 total points
ID: 16489162
Kenny is right, and here is the code for handling the enter keypress:

document.write('<table border=0 width=768 cellpadding=0 cellspacing=0 valign=bottom><tr bgcolor="#FFFFF"><td valign=top bgcolor="#FFFFFF" rowspan="3"><form name="frmSearchSite" method="get" action="/searchresults.asp"><input type=text size=12 name="qu" id="quSearch"><input type=image src="/Images/search.jpg" name="search" width="30" height="9" border=0  onkeypress="if (((window.event)&&(event.keyCode==13))||(e.which==13))document.forms[\'frmSearchSite\'].submit();"></form><br><br></td></tr><tr><td valign=bottom bgcolor="#FFFFFF" height="51" width="196" colspan="2"></td></tr></table>')
0
 
LVL 8

Accepted Solution

by:
KennyTM earned 260 total points
ID: 16489178
Well, if you wrap everything with a <form> and assign the code to the "onsubmit" event then this is not a problem because most browser will accept the [Enter] key as the same as submitting.

The following code works for me:

<form onsubmit="window.location.href='http://www.mysite.com/searchresults.asp?qu='+ document.getElementById('quSearch').value; return false;">
<table border="0" width="768" cellpadding="0" cellspacing="0" valign="bottom">
<tr bgcolor="#FFFFFF">
<td valign=top bgcolor="#FFFFFF" rowspan="3">
<input type=text size=12 name="qu" id="quSearch">
<input type="image" src="/Images/search.jpg" name="search" width="30" height="9" border="0" />
 <br><br></td></tr><tr><td valign=bottom bgcolor="#FFFFFF" height="51" width="196" colspan="2"></td></tr></table>
</form>
0
 
LVL 8

Expert Comment

by:KennyTM
ID: 16489194
In fact you don't need Javascript in this situation, just HTML is enough:

<form action="http://www.mysite.com/searchresults.asp" method="GET">
<table border="0" width="768" cellpadding="0" cellspacing="0" valign="bottom">
<tr bgcolor="#FFFFFF">
<td valign="top" bgcolor="#FFFFFF" rowspan="3">
<input type="text" size="12" name="qu" id="quSearch">
<input type="image" src="/Images/search.jpg" name="search" width="30" height="9" border="0" />
 <br><br></td></tr><tr><td valign="bottom" bgcolor="#FFFFFF" height="51" width="196" colspan="2"></td></tr></table>
</form>
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…
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…
Suggested Courses

809 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