Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dependant DropDowns to Text Field

Status
Not open for further replies.

LauraWord

Technical User
Nov 11, 2009
4
US
I have a page with 6 dependant drop down boxes. I also have a text field with a copy to clipboard button.

What I need it to do is send the drop down selections to the text field to be copied along with some static text. The resulting text field would look something like this after the selections are made.

"Per Wizard: Choice 0: Selection 2, Choice 1: Selection 2, Choice 2: Selection 4 ..."

Can this be done on each line as a second onChange event?

Code:
<html> 

<head> 
<HEAD> 

<script type="text/javascript"> 
<!-- 
var arrItems1 = new Array(); 
var arrItemsGrp1 = new Array(); 

arrItems1[1] = "Selection 1"; 
arrItemsGrp1[1] = 1; 
arrItems1[2] = "Selection 2"; 
arrItemsGrp1[2] = 1; 
arrItems1[3] = "Selection 3"; 
arrItemsGrp1[3] = 1; 

var arrItems2 = new Array(); 
var arrItemsGrp2 = new Array(); 

arrItems2[12] = "Selection 1"; 
arrItemsGrp2[12] = 1 
arrItems2[13] = "Selection 2"; 
arrItemsGrp2[13] = 1 
arrItems2[14] = "Selection 3"; 
arrItemsGrp2[14] = 1 
arrItems2[15] = "Selection 4"; 
arrItemsGrp2[15] = 1 
arrItems2[16] = "Selection 5"; 
arrItemsGrp2[16] = 1 
arrItems2[17] = "Selection 6"; 
arrItemsGrp2[17] = 1 

var arrItems3 = new Array(); 
var arrItemsGrp3 = new Array(); 

arrItems3[42] = "Selection 1"; 
arrItemsGrp3[42] = 12 
arrItems3[43] = "Selection 2"; 
arrItemsGrp3[43] = 12 
arrItems3[44] = "Selection 3"; 
arrItemsGrp3[44] = 12 

var arrItems4 = new Array(); 
var arrItemsGrp4 = new Array(); 

arrItems4[133] = "Selection 1"; 
arrItemsGrp4[133] = 42 

var arrItems5 = new Array(); 
var arrItemsGrp5 = new Array(); 

arrItems5[244] = "Selection 1"; 
arrItemsGrp5[244] = 133 
arrItems5[245] = "Selection 2"; 
arrItemsGrp5[245] = 133 

function selectChange(control,nu){ 
var frm=control.form; 
var sel=frm['Choice'+nu]; 
var iary=window['arrItems'+nu]; 
var gary=window['arrItemsGrp'+nu]; 
var cnt=1; 
while (frm['Choice'+cnt]){ 
if (cnt>=nu){ 
while (frm['Choice'+cnt].firstChild){ 
frm['Choice'+cnt].removeChild(frm['Choice'+cnt].firstChild); 
} 
} 
cnt++; 
} 
var myEle=document.createElement("option"); 
myEle.appendChild(document.createTextNode("[SELECT ONE]")); 
myEle.setAttribute("value","0"); 
sel.appendChild(myEle); 
for (var x = 0 ; x < iary.length ; x++ ) { 
if ( gary[x]==control.value ) { 
myEle = document.createElement("option"); 
myEle.setAttribute("value",x); 
myEle.appendChild(document.createTextNode(iary[x])); 
sel.appendChild(myEle); 
} 
} 
} 
// --> 
</script> 
<script language='Javascript'> 
function doact(d) 
{ 
var doc = eval("document.form."+d); 
cp = doc.createTextRange(); 
doc.focus(); 
doc.select(); 
cp.execCommand("Copy"); 
} 

function FP_popUpMsg(msg) {//v1.0 
alert(msg); 
} 
</script> 
</HEAD> 

<BODY> 

<form name=form> 
<div align="center"> 
<table border="2" width="790" id="table1" bordercolor="#64367C"> 
<tr> 
<td width="778" align="left" colspan="2"> 
&nbsp;</td> 
<tr> 
<td width="305" align="left"> 
<font size="2" face="MS Sans Serif">&nbsp;Choice 1:<font size="2" face="MS Sans Serif"> 
<select id="Choice0" name="Choice0" onchange="selectChange(this, 1);"> 
<option value="0" selected>[SELECT]</option> 
<option value="1">Selection 1</option> 
<option value="2">Selection 2</option> 
<option value="3">Selection 3</option> 
</select></font></font></td> 
<td width="225" align="center" onclick="FP_popUpMsg('More Info')"> 
<font face="MS Sans Serif" size="2" color="#FF0000">*</font><font face="MS Sans Serif" size="2" color="#0000FF"> 
<u> 
Tell me more</u></font></td> 
<tr> 
<td width="547" align="left"> 
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 2: 
<select id="secondChoice" name="Choice1" onchange="selectChange(this, 2); "></select></font></td> 
<td width="225" align="center" rowspan="4"> 
<TEXTAREA name="text1" cols="25" rows="5"> 
Selections will populate here. 
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy"> 
</td> 
</tr> 
<tr> 
<td width="547" align="left"> 
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 3: 
<select id="thirdChoice" name="Choice2" onchange="selectChange(this, 3);"></select></font></td> 
</tr> 
<tr> 
<td width="547" align="left"> 
<font size="2" face="MS Sans Serif">&nbsp;&nbsp;&nbsp; Code 4: 
<select id="fourthChoice" name="Choice3" onchange="selectChange(this, 4);"></select></font></td> 
</tr> 
<tr> 
<td width="547" align="left"> 
<font face="MS Sans Serif" size="2">&nbsp;&nbsp;&nbsp;&nbsp;Code 5: </font> <font size="3" face="Courier"> 
<select id="fifthChoice" name="Choice4" onchange="selectChange(this, 5);" size="1"></select></font></td> 
</tr> 
<tr> 
<td width="547" align="left"> 
<p><font face="MS Sans Serif" size="2">&nbsp;&nbsp;&nbsp; Answer: </font> 
<font size="3" face="Courier"> 
<select id="sixthChoice" name="Choice5" onChange="alert('Reminder')" size="1"></select> 
</font></p></td> 
<td width="225" align="center"> 
<font size="2" face="MS Sans Serif"> 
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td> 
</tr> 
<tr> 
<td width="778" align="left" colspan="2"> 
&nbsp;</td> 
</tr> 
</table> 
</div> 
</form> 

</body> 

</html>
 
Can this be done on each line as a second onChange event?

Yes, but I'd have thought it much less hassle to read all 6 values only when you click the 'copy' button.

BTW, you have an extra, erroneous, <HEAD> element.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
This form is a training tool so I would like for them to see the info post from the selection to the "notes" area and then copy all of it, to post to another program, once they click the button if possible.

How would I modify the onchange to keep the dependancy and add the new function, or is there a better way to accomplish my goal?
 
You can add as many functions as you need to the change. such as:
Code:
<select name="myselect" onChange="myfirstfuction(); mysecondfunction(); mythirdfunction();...">
...

Just remember to end your function calls with a semicolon. ";"

With that said, all you would need to do is call a second function that concatenates the values chosen into the textbox.

However you'll likely have to check whether the select box has already been added and if so, replace the value or disable the drop down or whatever, unless you want to allow multiple values form the same drop down.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top