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!

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

Link prompted by dependant drop down

Status
Not open for further replies.
LauraWord

LauraWord

Technical User
Nov 11, 2009
4
US
I have a form that has several dependant drop down boxes and copies all of the selections to a text box so you can paste the results to another location. I am using this in training to simulate the selections they will make in the actual system.

I would like for the last selection to be a link instead of another drop-down box so that I can direct them to more information (a step by step) based on their selections.

I am including a scaled down version of my code below. It actually has 8 possible selections for code 1 and 83 for code 6.

I have looked at but am not sure how to adapt it to work with the dependant boxes.

Any help would be greatly appreciated!

Code: 
<html>

<head>

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

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


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

arrItems2[12] = "Selection 1";
arrItemsGrp2[12] = 1


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

arrItems3[42] = "Selection 1";
arrItemsGrp3[42] = 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


var arrItems6 = new Array();
var arrItemsGrp6 = new Array();

arrItems6[500] = "http";
arrItemsGrp6[500] = 244

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>
<script language='Javascript'>
function listChoices() {
var textStr='';
var aSel=document.getElementsByTagName('select');
for(var i=0; i<aSel.length; i++) {
    if(aSel.length>1) {
        textStr+=aSel.name+": "+aSel[aSel.selectedIndex].text+",";
        }
    }
document.form.text1.value=textStr;
}
</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">
</td>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif"> Choice 1:<font size="2" face="MS Sans Serif">
<select id="Choice0" name="Choice0" onchange="listChoices(); selectChange(this, 1);">
<option value="0" selected>[SELECT]</option>
<option value="1">Selection 1</option>
</select></font></font></td>
<td width="220" 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="552" align="left">
<font size="2" face="MS Sans Serif">    Code 2: 
<select id="secondChoice" name="Choice1" onchange="listChoices(); selectChange(this, 2); "></select></font></td>
<td width="220" align="center" rowspan="5">
<TEXTAREA name="text1" cols="24" rows="5">
Selections will populate here.
</TEXTAREA><input onclick="doact('text1')" type="button" value="Copy">
</td>
</tr>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif">    Code 3: 
<select id="thirdChoice" name="Choice2" onchange="listChoices(); selectChange(this, 3);"></select></font></td>
</tr>
<tr>
<td width="552" align="left">
<font size="2" face="MS Sans Serif">    Code 4: 
<select id="fourthChoice" name="Choice3" onchange="listChoices(); selectChange(this, 4);"></select></font></td>
</tr>
<tr>
<td width="552" align="left">
<font face="MS Sans Serif" size="2">    Code 5: </font> <font size="3" face="Courier">
<select id="fifthChoice" name="Choice4" onchange="listChoices(); selectChange(this, 5);" size="1"></select></font></td>
</tr>
<tr>
<td width="552" align="left">
<p><font face="MS Sans Serif" size="2">    Code 6: </font>
<font size="3" face="Courier">
<select id="sixthChoice" name="Choice5" onChange="listChoices(); selectChange(this, 6); alert('Reminder') " size="1"></select>
</font></p></td>
<tr>
<td width="552" align="left">
<font face="MS Sans Serif" size="2">          Link: </font> <font size="3" face="Courier">
<select id="seventhChoice" name="Choice6"></select></font></td>
<td width="220" align="center">
<font size="2" face="MS Sans Serif">
<a target="_blank" href="reference.htm">Show the Full Spreadsheet</a></a></font></td>
</table>
</div>
</form>

</body>

</html>
 
Sort by date Sort by votes
Thanks Greg!

My drop downs work fine though. I am trying to figure out how to make the last selection display as a hyperlink instead of in a drop down box.
 
Upvote 0 Downvote
try the following as a simple example :

Code: 
<html>
	<head>
		<script language="javascript" type="text/javascript">
			function buildLink()
			{
				var theLink=document.getElementById("theLink"); // reference to the link object
				var dd1=document.getElementById("a"); // reference to the first dropdown
				var dd2=document.getElementById("b"); // reference to the second dropdown

				theLink.innerHTML="Click Me";
				theLink.href="[URL unfurl="true"]http://"[/URL] + dd1.value + "." + dd2.value;
			}
		</script>
	</head>
	<body>
		<form>
			<select id="a">
				<option value="[URL unfurl="true"]www">www</option>[/URL]
			</select>
			<p>
			<select id="b">
				<option value="news.bbc.co.uk">news.bbc.co.uk</option>
				<option value="greggriffiths.org">greggriffiths.org</option>
				<option value="adservio-consulting.co.uk">adservio-consulting.co.uk</option>
			</select>
			<p>
			<input type="button" value="Press Me" onclick="buildLink();">
		</form>
		<p>
		<a href="" id="theLink"></a>
	</body>
</html>

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
262
nanbread
nanbread
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
276
TheLazyPig
TheLazyPig
GessWurker1
  • Locked
  • Question
Sort array by date substring
Replies
6
Views
145
Offera
Offera
edd92
  • Locked
  • Question
Dropzone Issues
Replies
0
Views
112
edd92
edd92
bach1
  • Locked
  • Question
How to get value from popup window to parent window by clicking from database selection?
Replies
2
Views
123
Offera
Offera

Part and Inventory Search

Sponsor

Back
Top