473,386 Members | 1,679 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Return / Enter handling on Textbox

I'm trying to use javascript to execute code when the enter key is
pressed in a text box.

Basically, I'm doing this...

<html>
<body onload="load()" onunload="GUnload()">
<form name=zipform>
<input type="text" name="zipcode" value="" size="5"
class="flat">
<input type="button" name="button" value="Click"
onClick="changezip(this.form.zipcode.value);">
</form>
</body>
<script type="text/javascript">

function checkCR(evt)
{
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text") &&
(node.value.length==5))
{
changezip(this.form.zipcode.value);
}
else if ((evt.keyCode == 13) && (node.type=="text"))
{
return false;
}
}

document.onkeypress = checkCR;

function changezip(zip)
{
//Code that changes zipcode goes here
}

</script>
</html>

I DO NOT want to reload the page ( I.E. post the contents ) when the
enter key is pressed. In the case i've created, pressing the "click"
button after entering a zipcode, executes the javascript function
"changezip", however pressing enter will reload the page, and tack the
"?zipcode=xxxxx" to the end of the url...

Please help!

Thanks,
JHoff

Aug 14 '06 #1
1 2600
"jhoff" <jh***@elitepcrepair.comwrites:
I'm trying to use javascript to execute code when the enter key is
pressed in a text box.
If it's the only text box in the form, the simplest would be to put
your code in the onsubmit handler of the form.
<html>
<body onload="load()" onunload="GUnload()">
<form name=zipform>
<input type="text" name="zipcode" value="" size="5"
class="flat">
<input type="button" name="button" value="Click"
onClick="changezip(this.form.zipcode.value);">
</form>
</body>
<script type="text/javascript">

function checkCR(evt)
{
var evt = (evt) ? evt : ((event) ? event : null);
This line fails if "event" is not defined in the scope, i.e., as
a global variable. Instead, you can use:
var evt = evt || window.event;
(generally, "foo ? foo : bar" is equivalent to "foo || bar")
var node = (evt.target) ? evt.target : ((evt.srcElement) ?
evt.srcElement : null);
again:
var node = evt.target || evt.srcElement;

You can also consider doing something if there is no node detected
here.
if ((evt.keyCode == 13) && (node.type=="text") &&
(node.value.length==5))
are you trying to detect whether the node is the input field? In
that case, it's much easier to just check that:
if (evt.keyCode == 13 &&
node == document.forms['zipform'].elements['zipcode']) { ///...
{
changezip(this.form.zipcode.value);
Here you use "this" to refer to ... well, I don't know what you
expect it to refer to, but since this method is being called
as an event handler on the document, "this" refers to the document,
which most likely doesn't have a "form" property.

So, this fails, the code stops executing, and the keyevent is not
cancelled. Well, it's not cancelled anyway in this branch of the
code.

Do your browser give you any error messages?
}
else if ((evt.keyCode == 13) && (node.type=="text"))
{
return false;
}
}

document.onkeypress = checkCR;
Put the check on the input field where it is needed:
document.forms['zipform'].elements['zipcode'].onkeypress = checkCR;

I DO NOT want to reload the page ( I.E. post the contents ) when the
enter key is pressed. In the case i've created, pressing the "click"
button after entering a zipcode, executes the javascript function
"changezip", however pressing enter will reload the page, and tack the
"?zipcode=xxxxx" to the end of the url...
Submitting is the default action for pressing return on a text field.

--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Aug 14 '06 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Gav | last post by:
Is there a way that I can control exactly what happens when the user presses the return key in a TextBox?
3
by: Dan | last post by:
Consider a simple form with a textbox and button. Is there a way to handle the common situation where a user presses "return" rather than clicks on the button. I can already detect the...
2
by: Joe Erpenbeck | last post by:
On an asp.net page, when focus is in a text box and the user presses return, then a postback occurs and the first ImageButton on the page handles the event. I would prefer that nothing happens. I...
6
by: Andrew Willett | last post by:
I have a web form that is a child of a Master Page. It is a login form for forms authentication. When you fill in the username and password box and press ENTER it doesnt process any of the...
1
by: Imran Aziz | last post by:
Hello All, I have an option of search on my web page coded as under <p>Search Bookmarks: <asp:TextBox ID="txtSearch" runat="server" class="texta" ></asp:TextBox><asp:Button ID="btnSearch"...
2
by: Dave | last post by:
I received a design change to add an additional search textbox to our header control for completely different type of search than one on the left side of the page. Each search textbox is submitted...
15
by: Adam J. Schaff | last post by:
I have noticed that if a user closes a form via pressing return (either while the OK button has focus or if AcceptButton is set to OK for the form) then the "ENTER" keypress event fires ON THE...
4
by: bruce24444 | last post by:
I'm working on a database created in Access 97 which has a form which tracks claims made for damages. When the person reports the claim, a form is used to enter Date Reported, Claim Number, Loss...
6
by: Mark B | last post by:
I have a function that looks up a SQL table to see if a search term matches. It works fine but so far there are two things yet to work: 1) After entering a search term and pressing Enter, nothing...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.