/    Sign up×
Community /Pin to ProfileBookmark

Handling the Enter & return Key in Javascript

This is a repost after trying two things which still don’t seem to work to submit a form using either Enter or Return keys:

1) Added a value = submit to the form to set the button as default
2) Added the function checkForEnterKey() to look for the Return/Enter key to fire off the doSearch() function

Code is below which works fine when user clicks mouse on button but does not work with Return or Enter keys. Thanks again for any insights o the problem:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″/>
<title>Passport-i</title>
<meta name=”viewport” content=”width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>

<style type=”text/css” media=”screen”>@import “iphone.css”;
.searchBarContent {
float: left;
}

#searchForm {
float: left;
clear: both;
}

#searchBar {
background: url([url]http://i.i.com.com/cnwk.1d/i/wdgt/ipr/search-bck.png[/url]) repeat-x;
height: 44px;
}

.searchBarContent > img {
margin-top: 4px;
margin-left: 4px;
float: left;
}

.searchBarContent > form > input {
border: 1px solid silver;
font-size:18px;
font-weight: bold;
height: 24px;
vertical-align:middle;
padding: 2px;
margin-top: 10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

.searchBarContent > form > input.active {
color: black;
text-shadow: 2px 2px 2px #5b5b5b;
}

.searchBarContent > form > input.inactive {
color: #999;
text-shadow: none;
}

.searchBarContent > form > input.button {
font-size: 16px;
height: 24px;
color: #333;
}

#emailButton {
position: absolute;
top: 42px;
left: 218px;
width: 59px;
height: 30px;
margin-top: 7px;
margin-left: 35px;
padding-top: 7px;
padding-left: 8px;
background: url(spotlight.png) no-repeat;
cursor: pointer;
}

#emailButton a {
color: #3B6285;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0;
font-size: 16px;
text-decoration: none;
}
</style>

<script type=”application/x-javascript”>
addEventListener(“load”, function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar() { window.scrollTo(0, 1); }
</script>

<script type=”text/javascript”>

var xmlhttp; // need this global to deal with bug issue

function loadXMLDoc(url,responseHandler,async) {
xmlhttp = null;
if (window.XMLHttpRequest) { // code for Firefox, Opera, IE7
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // code for IE6, IE5
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
if (xmlhttp != null) {
xmlhttp.open(“GET”,url,async);
xmlhttp.onreadystatechange = responseHandler;
xmlhttp.send(null);
}
else {
alert(“Your browser does not support XMLHTTP.”);
}
}

function updateSearch() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
document.getElementById(‘results’).innerHTML = xmlhttp.responseText;
xmlhttp.close;
}
else {
alert(“Problem retrieving data:” + xmlhttp.statusText);
}
}
}

function doSearch() {
var search = encodeURIComponent(document.searchform.Search_Term.value);
var url = “http://cgi.mercury-soft.com/cgi/mercury-soft.com/user-cgi-bin/passport/passport.cgi?”;
url = url + “Formaction=Searchforword&Search_Term=”+search+”&B=Yes&x=1&y=1”;
loadXMLDoc(url,updateSearch,true);
return false;
}

function checkForEnterKey(evt) {
if( evt.getKeyCode() == 13) {
doSearch();
// send AJAX request
}
}
</script>

</head>

<body class=”tim_steals_code”>
<div class=”toolbar”><h1>Passport-i</h1>

</div>
<div>

<div id=”searchBar”>
<div class=”searchBarContent”>

<form name=”searchform”>

<input type=”text” name=”Search_Term”>
<input type=”button” type=”submit” value=”ʧúÁ¥¢” onkeypress= “checkForEnterKey()” onClick=”doSearch()”>
</form>

</div>
</div>

</div>

<br>

<div id=”results”>
</div>

</body>
</html>

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @ianshortreed spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...