How to tie up a TextBox and a DropDownList?

B

Benton

Hi there,

I am working with ASP.NET. I have a TextBox and DropDownList (for customer
info input) that I need to tie up, i.e., when the DropDownList item changes
(the customer name), the TextBox should reflect the selected value (the
customer number). And when a user types something in the TextBox and exits
the control, the DropDownList item should be changed to that value, showing
the corresponding customer name.

I am new to JS so I would appreciate code samples if possible, but any
pointer in the right direction is much appreciated as well.

Regards,

-Benton
 
L

Lee

Benton said:
Hi there,

I am working with ASP.NET. I have a TextBox and DropDownList (for customer
info input) that I need to tie up, i.e., when the DropDownList item changes
(the customer name), the TextBox should reflect the selected value (the
customer number). And when a user types something in the TextBox and exits
the control, the DropDownList item should be changed to that value, showing
the corresponding customer name.

I am new to JS so I would appreciate code samples if possible, but any
pointer in the right direction is much appreciated as well.

<html>
<head>
<title>demo</title>
<script type="text/javascript">
function setId(sel) {
if(sel.selectedIndex) {
sel.form.userId.value=sel.options[sel.selectedIndex].value;
} else {
sel.form.userId.value="";
}
}
function setName(textField) {
var sel=textField.form.userName;
for(var i=1;i<sel.options.length;i++) {
if(textField.value==sel.options.value) {
sel.options.selectedIndex=i;
return;
}
}
sel.options.selectedIndex=0;
alert("User ID "+textField.value+" is unknown");
}
</script>
<body>
<form>
<select name="userName" onchange="setId(this)">
<option>Choose Name...</option>
<option value="123">Angela</option>
<option value="234">Bob</option>
<option value="345">Chuck</option>
</select>
<input name="userId" onchange="setName(this)">
<br>
<input type="button" name="dummy" value="do nothing">
</form>
</body>
</html>
 
V

VK

info input) that I need to tie up, i.e., when the DropDownList item changes
(the customer name), the TextBox should reflect the selected value (the
customer number).

If you're working with ASP.NET then it's called "binding", not "tie
up". Will help for googling in the future.
I don't see what it has to do with ASP.NET in this particular cases
(unless you're updating your server data right away).

In the common case:
(I just attached the list scroll to more conventional <Enter> key
press. Also see in this group about select onchange event and some
accessibility issues.)

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<form name="myForm">
<select name="Customers"
onchange="this.form.CustomerID.value=this[selectedIndex].value">
<option selected value="cust1234">John Doe</option>
<option value="cust5678">Michael Smith</option>
<option value="cust9012">Mary Smith</option>
</select>
<br>
<input type="text" name="CustomerID" onkeypress="
var key = event.which || event.keyCode;
if ((key)&&(key==13)) {
var foo = (event.preventDefault) ?
event.preventDefault() :
(event.returnValue = false);
with (this.form.Customers) {
for(i=0; i < options.length; i++) {
if (options.value == this.value) {
options.selected = true;
break;
}
}
}
}
">
</form>
</body>
</html>
 
B

Benton

info input) that I need to tie up, i.e., when the DropDownList item
If you're working with ASP.NET then it's called "binding", not "tie
up". Will help for googling in the future.

Thanks for the tip. English is not my native tongue so your clarification is
helpful indeed.
In the common case:
(I just attached the list scroll to more conventional <Enter> key
press. Also see in this group about select onchange event and some
accessibility issues.)

Wow, you provided me with more than I expected. I appreciate it a lot.

Regards,

-Benton
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<form name="myForm">
<select name="Customers"
onchange="this.form.CustomerID.value=this[selectedIndex].value">
<option selected value="cust1234">John Doe</option>
<option value="cust5678">Michael Smith</option>
<option value="cust9012">Mary Smith</option>
</select>
<br>
<input type="text" name="CustomerID" onkeypress="
var key = event.which || event.keyCode;
if ((key)&&(key==13)) {
var foo = (event.preventDefault) ?
event.preventDefault() :
(event.returnValue = false);
with (this.form.Customers) {
for(i=0; i < options.length; i++) {
if (options.value == this.value) {
options.selected = true;
break;
}
}
}
}
">
</form>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top