A
almurph
Hi everyone,
I'm a newbie to javascript. I have written some code to detect when a
user presses the down-arrow, up-arrow and enter button. Essentially
the user can arrow down or up through a list and the textbox is
populated with the option when the user presses the enter button. This
is for a VB.NET Web form type project.
The problem is that when I press the enter button the entire form get
refreshed and the javascript code is not executed. Or perhaps it is
but get "over-ruled" if you take my meaning.
Any comments/suggestions much appraciated. I have included the HTML
et al code below:
Cheers,
Al
****CODE*****
<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<script type="text/javascript">
function Test()
{
var retVal =
WebForm1.GetUsernameList(document.Form1.txtName.value);
//Populate the innerHTML of the div with the results
javascript:document.getElementById('nameList').style.display = "";
document.getElementById('nameList').innerHTML = retVal.value;
//alert(retVal.value)
}
</script>
<script type="text/javascript">
var count = 1
function previousSuggestion(){
var Nodes = document.getElementById ('colm')
var items = Nodes.getElementsByTagName('td')
items(count).style.backgroundColor = "#EFEFEF";
}//end previousSuggestion
function nextSuggestion(count){
var Nodes = document.getElementById ('colm')
var items = Nodes.getElementsByTagName('td')
items(count).style.backgroundColor = "#EFEFEF";
}//end nextSuggestion
function chooseSuggestion(){
document.getElementById ('txtName').innerText =
items(count).innerText
}//end chooseSuggestions
function keyHandler() {
switch (event.keyCode) {
case 38: //up-arrow
this.previousSuggestion()
if (count == 1)
count = count
else
count--
break
case 40: //down-arrow
this.nextSuggestion(count)
count++
break
case 13: //enter=13, tab=9
this.chooseSuggestion()
}
}
</script>
</HEAD>
<body ms_positioning="GridLayout" >
<form id="Form1" method="post" runat="server" onkeyup="javascript:
keyHandler()">
<INPUT id="txtName" onkeyup="javascript: Test()"
type="text">
<DIV id="nameList"> </DIV>
</form>
</TEXTAREA></body>
</HTML>
I'm a newbie to javascript. I have written some code to detect when a
user presses the down-arrow, up-arrow and enter button. Essentially
the user can arrow down or up through a list and the textbox is
populated with the option when the user presses the enter button. This
is for a VB.NET Web form type project.
The problem is that when I press the enter button the entire form get
refreshed and the javascript code is not executed. Or perhaps it is
but get "over-ruled" if you take my meaning.
Any comments/suggestions much appraciated. I have included the HTML
et al code below:
Cheers,
Al
****CODE*****
<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<script type="text/javascript">
function Test()
{
var retVal =
WebForm1.GetUsernameList(document.Form1.txtName.value);
//Populate the innerHTML of the div with the results
javascript:document.getElementById('nameList').style.display = "";
document.getElementById('nameList').innerHTML = retVal.value;
//alert(retVal.value)
}
</script>
<script type="text/javascript">
var count = 1
function previousSuggestion(){
var Nodes = document.getElementById ('colm')
var items = Nodes.getElementsByTagName('td')
items(count).style.backgroundColor = "#EFEFEF";
}//end previousSuggestion
function nextSuggestion(count){
var Nodes = document.getElementById ('colm')
var items = Nodes.getElementsByTagName('td')
items(count).style.backgroundColor = "#EFEFEF";
}//end nextSuggestion
function chooseSuggestion(){
document.getElementById ('txtName').innerText =
items(count).innerText
}//end chooseSuggestions
function keyHandler() {
switch (event.keyCode) {
case 38: //up-arrow
this.previousSuggestion()
if (count == 1)
count = count
else
count--
break
case 40: //down-arrow
this.nextSuggestion(count)
count++
break
case 13: //enter=13, tab=9
this.chooseSuggestion()
}
}
</script>
</HEAD>
<body ms_positioning="GridLayout" >
<form id="Form1" method="post" runat="server" onkeyup="javascript:
keyHandler()">
<INPUT id="txtName" onkeyup="javascript: Test()"
type="text">
<DIV id="nameList"> </DIV>
</form>
</TEXTAREA></body>
</HTML>