1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:38 pm May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Multiple text/select Combo Boxes?

         

fuzzydad

10:31 pm on Apr 9, 2006 (gmt 0)

10+ Year Member



I'm something of a Noob, and so am certain the solution to my problem is painfully easy, but I'm simply unable to see that lovely forest for all those pesky trees. I require as many as 70 dropdown/text combo boxes in any of 18 complex forms pages. I've managed to cobble together enough javascript to effect one such combo box, but was hoping to manage ALL our combo boxes from a single (and not too complicated) set of functions in a master.js file. Browser compatibility is not an issue so long as the script works in ie.5+ as our need purpose is not intended for the general public.

Example code: only works for one text field -

<script>
<!-- Begin
// quick browser tests
var ie5 = (document.all && document.getElementById)? true : false;

function show(sw,obj) {
// show/hide divs
if (sw && ie5) document.all[obj].style.visibility = 'visible';
if (!sw && ie5) document.all[obj].style.visibility = 'hidden';
}

function popTextField(obj){
document.getElementById("textfield_1").value=obj;
}

// End -->
</script>

</head>

<body>
<style type="text/css">
<!--
.myLayersClass { position: relative; visibility: hidden; }
//-->
</style>
<div align="center">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="57%">
<tr>
<td width="188">
<p align="center">Number</td>
<td width="188">
<p align="center">Color</td>
<td>
<p align="center">Direction</td>
</tr>
<tr>
<td width="188">
<input type="text" name="textfield_1" id="textfield_1" size="25" borders="0" onFocus="show(true,'div1');" onblur="show(false,'div1');" ></td>
<td width="188">
<input type="text" name="textfield_2" id="textfield_2" size="25" borders="0" onFocus="show(true,'div2');" onblur="show(false,'div2');" ></td>
<td>
<input type="text" name="textfield_3" id="textfield_3" size="25" borders="0" onFocus="show(true,'div3');" onblur="show(false,'div3');" ></td>
</tr>
</table>
</div>
<p>
</HEAD>

<BODY>
&nbsp;<!--onChange="popTextField(this.value);"--></p>
<div id = "div1" class = "myLayersClass" style="position: absolute; top: 62px; left: 262px; width: 30px">
<p align="left">
<select name="dropdown1" onChange="popTextField(this.value);" onblur="show(false,'div1');">
<option>Select Number</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
<option value="03">Option 3</option>
<option value="04">Option 4</option>
<option value="05">Option 5</option>
</select></div>

<div id = "div2" class = "myLayersClass" style="position: absolute; top: 62px; right: 446px; width: 30px">
<p align="left">
<select name="dropdown2" onChange="popTextField(this.value);" onblur="show(false,'div2');">
<option>Select Color</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Orange">Orange</option>
</select></div>

<div id = "div3" class = "myLayersClass" style="position: absolute; top: 64px; right: 258px; width: 30px">
<p align="left">
<select name="dropdown3" onChange="popTextField(this.value);" onblur="show(false,'div3');">
<option>Select Direction</option>
<option value="North">North</option>
<option value="East">East</option>
<option value="South">South</option>
<option value="West">West</option>
</select></div>

I suspect this has something to do with variables, or otherwise passing the element Id to the function? Any help would be greatly appreciated!

fuzzydad

2:45 am on Apr 10, 2006 (gmt 0)

10+ Year Member



Hello?

Was it something I said? Didn't say?

phillipandrews

1:01 pm on Apr 10, 2006 (gmt 0)

10+ Year Member



You might want to assign an id to every option on every list box, then create an array of all of the Ids. Then you can just use a for block to change all of them, like this:

for (i=0; i<=idarray.length; i++) {
// do whatever, using idarray[i]
}
Or you could use getElementsByTagName("option") instead.
you could just pass the element's id to any function in your js file then getElementById(var) to change a specific one
Hope this gives you some ideas...

fuzzydad

3:22 pm on Apr 10, 2006 (gmt 0)

10+ Year Member



Yes Phillip, thank you.

That's exactly what I'm trying to get at.

How may I pass the id of textfield_X to function_Y from an event handler (onChange?) in dropdown_Z?

Ex:
//textField_X
<input type="text" name="ThisTextfield" id="ThisTextfield" size="25" borders="0" onFocus="show(true,'div3');" onblur="show(false,'div3');" ></td>

//function_Y
function popTextField(obj){
document.getElementById("textfield_ANY").value=obj;
}

dropDown_Z
<select name="dropdown1" onChange="popTextField(this.value;" onblur="show(false,'div1');">

phillipandrews

1:03 pm on Apr 11, 2006 (gmt 0)

10+ Year Member



I guess you're going to have to do it the old-fashioned way, with the ids of the associated text fields hard-coded into the onChange property, like this:

<input type=text id=TextField>
<select id=DropDown onChange="doStuff('TextField')">
// you could also use doStuff(0) if you have an array of the ids
... and ditto, ditto, ditto for all of the other ones
I don't know how to do it any other way.
Sorry I couldn't find a more "cool" way to do it,
-Phillip

fuzzydad

2:42 pm on Apr 11, 2006 (gmt 0)

10+ Year Member



Thanks Phillip

I have settled on the following solution which may help some other poor Noob like myself,

simply add the variable (what) to the function

function popTextField(what,obj){
document.getElementById(what).value=obj;
}

Try this Example:

<html>
<body>
<script>
<!-- Begin
// quick browser tests
var ns4 = (document.layers)? true : false;
var ie4 = (document.all &&!document.getElementById)? true : false;
var ie5 = (document.all && document.getElementById)? true : false;
var ns6 = (!document.all && document.getElementById)? true : false;

function show(sw,obj) {
// show/hide divs
if (sw && ie5) document.all[obj].style.visibility = 'visible';
if (!sw && ie5) document.all[obj].style.visibility = 'hidden';
}

function popTextField(what,obj){
document.getElementById(what).value=obj;
}

// End -->
</script>

<style type="text/css">
<!--
.myLayersClass { position: relative; visibility: hidden; }
//-->
</style>
<div align="center">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="57%">
<tr>
<td width="188">
<p align="center">Number</td>
<td width="188">
<p align="center">Color</td>
<td>
<p align="center">Direction</td>
</tr>
<tr>
<td width="188">
<input type="text" name="textfield_1" id="textfield_1" size="25" borders="0" onFocus="show(true,'div1');" onblur="show(false,'div1');" ></td>
<td width="188">
<input type="text" name="textfield_2" id="textfield_2" size="25" borders="0" onFocus="show(true,'div2');" onblur="show(false,'div2');" ></td>
<td>
<input type="text" name="textfield_3" id="textfield_3" size="25" borders="0" onFocus="show(true,'div3');" onblur="show(false,'div3');" ></td>
</tr>
</table>
</div>
<div id = "div1" class = "myLayersClass" style="position: absolute; top: 55px; left: 170px; width: 30px">
<p align="left">
<select name="dropdown1" onChange="popTextField('textfield_1',this.value);" onblur="show(false,'div1');">
<option>Select Number</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
<option value="03">Option 3</option>
<option value="04">Option 4</option>
<option value="05">Option 5</option>
</select></div>

<div id = "div2" class = "myLayersClass" style="position: absolute; top: 56px; right: 362px; width: 30px">
<p align="left">
<select name="dropdown2" onChange="popTextField('textfield_2',this.value);" onblur="show(false,'div2');">
<option>Select Color</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Orange">Orange</option>
</select></div>

<div id = "div3" class = "myLayersClass" style="position: absolute; top: 56px; right: 164px; width: 30px">
<p align="left">
<select name="dropdown3" onChange="popTextField('textfield_3',this.value);" onblur="show(false,'div3');">
<option>Select Direction</option>
<option value="North">North</option>
<option value="East">East</option>
<option value="South">South</option>
<option value="West">West</option>
</select></div>

</body>
</html>

fuzzydad

3:39 pm on Apr 11, 2006 (gmt 0)

10+ Year Member



further clarification for us noobs,

the variabel (what) could as easily be (booger)

function popTextField(booger,obj){
document.getElementById(booger).value=obj;
}

Doesn't matter what you call it!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:38 pm May 14, 2026