Log in

View Full Version : Listbox and textbox help


benslayton
01-15-2007, 08:30 PM
instead of "place1,place2, and place3 the showing up in the text box. I actually want a small description to go in the textbox instead of what is in the listbox.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<SCRIPT>
<!--

function combotext_onkeydown(e,oText,oSelect){

keyCode = e.keyCode;

if (keyCode == 40 || keyCode == 38) {
oSelect.style.display = 'block';
oSelect.focus();
comboselect_onchange(oSelect, oText);
}
else if (keyCode == 13) {
e.cancelBubble = true;
if (e.returnValue) e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
comboselect_onchange(oSelect, oText);
oSelect.style.display='none';
oText.focus();
return false;
}
else if(keyCode == 9) return true;
else { //alert(keyCode);

oSelect.style.display = 'block';

var c = String.fromCharCode(keyCode);
c = c.toUpperCase();
toFind = oText.value.toUpperCase() + c;

for (i=0; i < oSelect.options.length; i++){
nextOptionText = oSelect.options.text.toUpperCase();

if(toFind == nextOptionText){
oSelect.selectedIndex = i;
break;
}

if(i < oSelect.options.length-1){
lookAheadOptionText = oSelect.options[i+1].text.toUpperCase() ;
if( (toFind > nextOptionText) &&
(toFind < lookAheadOptionText) ){
oSelect.selectedIndex = i+1;
break;
}
}
else {
if(toFind > nextOptionText){
oSelect.selectedIndex = oSelect.options.length-1; // stick it at the end
break;
}
}
}
}
}


function comboselect_onchange(oSelect,oText) {
if(oSelect.selectedIndex != -1)
oText.value = oSelect.options[oSelect.selectedIndex].text;
}

function comboselect_onkeyup(keyCode,oSelect,oText){
if (keyCode == 13) {
comboselect_onchange(oSelect, oText);
oSelect.style.display='none';
oText.focus();
}
}

// -->
</SCRIPT>
<body>
<FORM name="form1">
<table width="617" border="1" align="center" bordercolor="#990000">
<tr>
<th scope="col">Places</th>
<th scope="col">Description</th>
</tr>
<tr>
<th width="219" scope="row"> <SELECT NAME="selectInput1" SIZE="8" ONCHANGE="comboselect_onchange(this, this.form.textInput)" >
<option>place1</option>
<option>place2</option>
<option>place3</option>

</SELECT> </th>
<th width="382" scope="row">
<textarea name="textInput" cols="20" rows="10" id="textInput"></textarea> </th>
</tr>
</table>
</FORM>
</BODY>
</html>

Any Help?:)
jscheuer1
01-15-2007, 10:28 PM
You could give each option a value attribute and pull options.value instead of options.text.
benslayton
01-16-2007, 03:02 AM
You could give each option a value attribute and pull options.value instead of options.text.


I changed that in the script tags but that didnt do any good. It still does the same thing.
jscheuer1
01-16-2007, 05:10 AM
I don't think you understood me. This demo shows that the value may be retrieved instead of the text and that the value may be completely different than the text:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Select Options Value - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function demo(el){
alert(el.options[el.selectedIndex].value)
}
</script>
</head>
<body>
<select name="selectInput1" onchange="demo(this)" >
<option value="A longer description of Place 1">place1</option>
<option value="The movie version of a longer description of Place 2">place2</option>
<option value="Bob's your Uncle's longer description of Place 3">place3</option>
</body>
</html>
benslayton
01-16-2007, 06:19 AM
sorry but I dont understand how to make the description show up in a textbox and not an alert box.
jscheuer1
01-16-2007, 08:25 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Select Options Value to Textarea - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function demo(el){
el.form.textInput.value=el.options[el.selectedIndex].value;
}
</script>
</head>
<body>
<form action="">
<table>
<tr>
<td><select name="selectInput1" onchange="demo(this)">
<option value="A longer description of Place 1">place1</option>
<option value="The movie version of a longer description of Place 2">place2</option>
<option value="Bob's your Uncle's longer description of Place 3">place3</option>
</select></td>
<td><textarea name="textInput" cols="30" rows="5">A longer description of Place 1</textarea> </td>
</tr>
</table>


</form>
</body>
</html>
benslayton
01-17-2007, 01:57 AM
Gracious, Senor!!!