Need to add an url 1

overyde · Jul 18, 2003

Hi,
I don't really deal with javascript a lot and I need a little help. I have three dropdown boxes. When you select an option in the first dropdown box the value in the second dropdown box changes relatively. The third drop down box works similarly. My client wants the third box to be the hyperlink. (i.e. once they have chosen the value in the third box they can then click on a "submit" button and be taken to that page)

I will enclose the code hereafter.(Sorry it is pretty long but I really don't deal with this often)

<html>
<head>
<link rel="stylesheet" type="text/css" href="1.css">
<title>
Papersmith & Son
</title>
<script>

</script>

</head>

<body background="./images/bg2.gif" style=" background-repeat: repeat-selCat; ">
<img src="./images/f.gif" style=" position:absolute; top:0px; left:0px; " selPaperidth="148" height="53">
<table class="toptable">
<tr>
<td><a href="products.htm" class="topmenu">Products</a></td><td><font color="#036A6D">|</font></td>
<td><a href="services.htm" class="topmenu">Services</a></td><td><font color="#036A6D">|</font></td>
<td><a href="wwa.htm" class="topmenu">Who We Are</a></td><td><font color="#036A6D">|</font></td>
<td><a href="pshop.htm" class="topmenu">Paper Shop</a></td><td><font color="#036A6D">|</font></td>
<td><a href="pdes.htm" class="topmenu">Paper and Design</a></td><td><font color="#036A6D">|</font></td>
<td><a href="tgui.htm" class="topmenu">Technical Guide</a></td>
</tr>
</table>
<img class="pageline1" src="./images/line1.gif">
<img class="pageline2" src="./images/line2.gif">
<img class="pageheading" src="./images/productslogo.gif">

<table class="pagemenutablelevel2" size="600px" cellpadding="5">
<tr>
<td><a class="pagemenulevel2" href="techspec.htm">Technical Specifications</a></td>
</tr>
</table>

<img src="./images/paperselector.gif" style="position: absolute; left: 598; top: 72" selPaperidth="129" height="33">

<form name="frmPS" style=" position:absolute; left:154px; top:120px; ">
<table>
<tr>
<td>
<font face="verdana" color="#037774" size="-2"><b>Product Category</b></font><br>
<select class="paperSelectorSelectBox" name="selCat" onchange="b(document.frmPS.selCat.value);">
<option value="">Select product category</option>
<option value="">_____________________</option>
<option value="coated">Coated</option>
<option value="handmade">Handmade</option>
<option value="office">Office</option>
<option value="plastics">Plastics</option>
<option value="self">Self-Adhesive</option>
<option value="text">Text and Cover</option>
<option value="translucent">Translucent</option>
</select>
</td>
<td>
<font face="verdana" color="#037774" size="-2"><b>Product Type</b></font><br>
<select class="paperSelectorSelectBox" name="selType" onchange="c(document.frmPS.selType.value);">
<option value="">Select product type</option>
<option value="">_____________________</option>
</select>
</td>
<td>
<font face="verdana" color="#037774" size="-2"><b>Paper Type</b></font><br>
<select class="paperSelectorSelectBox" name="selPaper" onchange="d(document.frmPS.selPaper.value);">
<option value="">Select paper type</option>
<option value="">_____________________</option>
</select>
</td>
</table>

<input type="text" name="q" size="250" style=" position:absolute; border:none; " value="...working shortly">

</form>

</body>
</html>

Reality is built on a foundation of dreams.

faadiel · Jul 18, 2003

Hope that this solves ure problem

<html>
<head>
<link rel="stylesheet" type="text/css" href="1.css">
<title>
Papersmith & Son
</title>
<script>
<!--
function clearTextBox(intVal)
{
// if intVal == 1 then hide the button
if(intVal==1){
document.frmPS.q.style.display = "none";
}
else{
document.frmPS.q.style.display = "inline";
}

}

function b(selection)
{

clearTextBox(1)
document.frmPS.selPaper.options[0].selected=true;
document.frmPS.selType.options[0].selected=true;

//clear 2nd select list
var noOptions = document.frmPS.selType.length;
do
{
document.frmPS.selType.options[noOptions] = null;
noOptions--;
}
while (noOptions >= 2);

//clear 3rd select list
var noOptions1 = document.frmPS.selPaper.length;
if(noOptions1 > 1)
{
do
{
document.frmPS.selPaper.options[noOptions1] = null;
noOptions1--;
}
while (noOptions1 >= 2);
}

if(selection == 'coated')
{
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Matt','matt');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Silk(semi-matt)','silk');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Gloss','gloss');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Cast Coated','castcoated');
}
else if(selection == 'handmade')
{
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('River Reed','riverreed');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Deerfield','deerfield');
}
else if(selection == 'office')
{
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Laser','laser');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Inkjet','inkjet');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Transfer(Textile)','transfertextile');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Photo Realistic','photorealistic');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Photo (Weather Resistant)','photoweares');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Rainbow Bright','rainbow');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Pastels','pastels');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Transparencies','trans');
}
else if(selection == 'plastics')
{
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Polypropylene','polyprop');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Rigid PVC','rigidpvc');
}
else if(selection == 'self')
{
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Paper','selfpaper');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Vinyl','selfvinyl');
}
else if(selection == 'text')
{
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Smooth & Toothy','smoothtoothy');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Fibre Added','fibre');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Textured','textured');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Metallics','metallics');
}
else if(selection == 'translucent')
{
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Plain','transplain');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Coloured','transcoloured');
document.frmPS.selType.options[document.frmPS.selType.options.length] = new Option('Textured','transtextured');
}

}

function c(selectx)
{

document.frmPS.selPaper.options[0].selected=true;
clearTextBox(1)

//clear 3rd select list
var noOptions1 = document.frmPS.selPaper.length;
if(noOptions1 > 1)
{
do
{
document.frmPS.selPaper.options[noOptions1] = null;
noOptions1--;
}
while (noOptions1 >= 2);
}

if(selectx == 'matt')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Parilux White','pariluxwhite');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Parilux Cream','pariluxcream');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('PhoeniXmotion Xenon','phoenixxen');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('PhoeniXmotion Xantur','phoenixxan');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('PhoeniXmotion Xantic','phoenixxantic');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('PhoeniXmotion Xyrrus','phoenixxyr');
}
else if(selectx== 'silk')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Creator Silk White','creatsilkwhite');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Phoenix Imperial White','phoenixmpwhite');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Phoenix Imperial Ivory','phoeniximpivo');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('PhoenoMatt White','phoenomattwhite');
}
else if(selectx== 'gloss')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Creator Gloss White','creatglosswhite');
}
else if(selectx== 'castcoated')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('VeniceLux','venicelux');
}
else if(selectx== 'riverreed')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Cream','rivercream');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Ivory','riverivory');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Sand','riversand');
}
else if(selectx== 'deerfield')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Deerfield','deerfield2');
}
else if(selectx== 'laser')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Laser','laser2');
}
else if(selectx== 'inkjet')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Inkjet','inkjet2');
}
else if(selectx== 'transfertextile')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Transfer (Textile)','transfertextile2');
}
else if(selectx== 'photorealistic')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Photo Realistic','photorealistic2');
}
else if(selectx== 'photoweares')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Photo (Weather Resistant)','photoweares2');
}
else if(selectx== 'rainbow')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Rainbow Bright','rainbow2');
}
else if(selectx== 'pastels')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Pastels','pastels2');
}
else if(selectx== 'trans')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Transparencies','trans2');
}
else if(selectx== 'polyprop')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Priplak','priplak');
}
else if(selectx== 'rigidpvc')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('None Available Yet','');
}
else if(selectx== 'selfpaper')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Soria (Matt Uncoated)','soria');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Duero (Semi-Gloss)','Duero');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Alto Brillo (High Gloss Coated)','alto');
}
else if(selectx== 'selfvinyl')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Undergoing Trials','');
}
else if(selectx== 'smoothtoothy')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Ambassador Wove','ambwove');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Biotop 3','biotop3');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Cranes Crest','cranes');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Cyberstar','cyber');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Deep Black','deepblack');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Eureka Wove','eureka');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Luxboard','luxboard');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Superwove','superwove');
}
else if(selectx== 'fibre')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Bier Paper','bier');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Flannel','flannel');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Stroh','stroh');
}
else if(selectx== 'textured')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Ambassador Laid','amblaid');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Ambassador Profile','ambprofile');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Brightwater','brightwater');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Eureka Laid','eurlaid');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Felt','felt');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Groove Too','groovetoo');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Groove III','grooveiii');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Kendall Cover - Antelope','kendallant');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Kendall Cover - Cord','kendallcord');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Luxboard Linen','luxlinen');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Saltire','saltire');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Scotia Original','scotiaOrig');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Scotia Weave','scotiaweave');
}
else if(selectx== 'metallics')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Stardream','stardream');
}
else if(selectx== 'transplain')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Gateway Tracing','gateway');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Virtual Parchment','virtual');
}
else if(selectx== 'transcoloured')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Xpose','xpose');
}
else if(selectx== 'transtextured')
{
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Brightwater Rib Translucent','brightwaterrib');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Scotia Original Translucent','scotorigtrans');
document.frmPS.selPaper.options[document.frmPS.selPaper.options.length] = new Option('Scotia Weave Translucent','scotweavetrans');
}
}

function d(blah)
{

if(document.frmPS.selPaper.value!="&quot

{
clearTextBox(0)
}
else{
clearTextBox(1)
return;
}
if(blah == 'great')
{
document.frmPS.q.value='details1 details1 1111111111111111111111111111111'
}
else if(blah == '33')
{
document.frmPS.q.value='details2 details2 222222222222222222222222222222222'
}
}

function funcSubmit(){
alert("Enter the hyperlink here.&quot

;
}
-->
</script>

</head>

<body background="./images/bg2.gif" style=" background-repeat: repeat-selCat; ">
<img src="./images/f.gif" style=" position:absolute; top:0px; left:0px; " selPaperidth="148" height="53">
<table class="toptable">
<tr>
<td><a href="products.htm" class="topmenu">Products</a></td><td><font color="#036A6D">|</font></td>
<td><a href="services.htm" class="topmenu">Services</a></td><td><font color="#036A6D">|</font></td>
<td><a href="wwa.htm" class="topmenu">Who We Are</a></td><td><font color="#036A6D">|</font></td>
<td><a href="pshop.htm" class="topmenu">Paper Shop</a></td><td><font color="#036A6D">|</font></td>
<td><a href="pdes.htm" class="topmenu">Paper and Design</a></td><td><font color="#036A6D">|</font></td>
<td><a href="tgui.htm" class="topmenu">Technical Guide</a></td>
</tr>
</table>
<img class="pageline1" src="./images/line1.gif">
<img class="pageline2" src="./images/line2.gif">
<img class="pageheading" src="./images/productslogo.gif">

<table class="pagemenutablelevel2" size="600px" cellpadding="5">
<tr>
<td><a class="pagemenulevel2" href="techspec.htm">Technical Specifications</a></td>
</tr>
</table>

<img src="./images/paperselector.gif" style="position: absolute; left: 598; top: 72" selPaperidth="129" height="33">

<form name="frmPS" style=" position:absolute; left:154px; top:120px; ">
<table>
<tr>
<td>
<font face="verdana" color="#037774" size="-2"><b>Product Category</b></font><br>
<select class="paperSelectorSelectBox" name="selCat" onchange="b(document.frmPS.selCat.value);">
<option value="">Select product category</option>
<option value="">_____________________</option>
<option value="coated">Coated</option>
<option value="handmade">Handmade</option>
<option value="office">Office</option>
<option value="plastics">Plastics</option>
<option value="self">Self-Adhesive</option>
<option value="text">Text and Cover</option>
<option value="translucent">Translucent</option>
</select>
</td>
<td>
<font face="verdana" color="#037774" size="-2"><b>Product Type</b></font><br>
<select class="paperSelectorSelectBox" name="selType" onchange="c(document.frmPS.selType.value);">
<option value="">Select product type</option>
<option value="">_____________________</option>
</select>
</td>
<td>
<font face="verdana" color="#037774" size="-2"><b>Paper Type</b></font><br>
<select class="paperSelectorSelectBox" name="selPaper" onchange="d(document.frmPS.selPaper.value);">
<option value="">Select paper type</option>
<option value="">_____________________</option>
</select>
</td>
</table>

<input type="button" style="display:none"name="q" size="250" style=" position:absolute; border:none; " value="submit" onclick="funcSubmit()">

</form>

</body>
</html>

ciau
Faadiel

overyde · Jul 18, 2003

Thats really cool but where exactly do I insert the hyperlinks?

Reality is built on a foundation of dreams.

faadiel · Jul 18, 2003

what are the hyperlinks and are they dependant on the "Product Type"

overyde · Jul 18, 2003

They are dependent on the product type. I found a solution as follows:

<HTML>
<HEAD>
<TITLE>Script</TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined&quot

v=true;
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>

<BODY BGCOLOR="#ffffff" link="#CC0033" vlink="#333399" alink="#FF0000">

<TABLE WIDTH="96%" BORDER="0" CELLSPACING="5" CELLPADDING="5">
<TR><TD WIDTH="100%">
<FONT FACE="ARIAL,HELVETICA" SIZE="-1">

<b>Menu Related Select Lists</B></FONT>
<P>
<CENTER>
<TABLE BGCOLOR="#DDCCFF" BORDER="0" CELLPADDING="8" CELLSPACING="0">
<TR VALIGN="TOP">
<TD>Choose a subject:<BR>
<FORM NAME="f1" METHOD="POST" onSubmit="return false;">
<SELECT NAME="m1" onChange="relate(this.form,0,this.selectedIndex)">
<OPTION VALUE="namenu.htm">Main A
<OPTION VALUE="namenu.htm">Main B
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
</FORM>
</TD>

<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>---></B></TD>
<TD>Choose a topic:<BR><FORM NAME="f2" METHOD="POST" onSubmit="return false;">
<SELECT NAME="m2" onChange="relate2(this.form,0,this.selectedIndex)">
<OPTION VALUE="namenu.htm">Topic 1a
<OPTION VALUE="namenu.htm">Topic 1b
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="namenu.htm">
</FORM>
</TD>

<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>---></B></TD>
<TD>Choose a subtopic:<BR><FORM NAME="f3" METHOD="POST" ACTION="Hotscript" onSubmit="return false;">
<SELECT NAME="m3" onChange="jmp(this.form,0)">
<OPTION VALUE="namenu.htm">Glossary
<OPTION VALUE="namenu.htm">Lesson 56
<OPTION VALUE="namenu.htm">Lesson 57
<OPTION VALUE="namenu.htm">Lesson 58
<OPTION VALUE="namenu.htm">Lesson 59
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="namenu.htm">
</FORM>
</TD>

</TR>
</TABLE></CENTER>
</FONT>
</TD></TR>
</TABLE>
<center><font face="ms sans serif" size=1> ¹Õè¤×ÍµÑÇÍÂèÒ§·Ñé§ËÁ´·èÒ¹ÊÒÁÒÃ¶à»ÅÕèÂ¹ÅÔ§¤ìà»ç¹¢Í§¤Ø³àÍ§</font></center>

</BODY>
</HTML>

Reality is built on a foundation of dreams.

faadiel · Jul 18, 2003

is the link for the current page, or is the link going to open in a new window...

overyde · Jul 18, 2003

current page, but I'll be using frames.

Reality is built on a foundation of dreams.

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!

Need to add an url 1

overyde

Programmer

faadiel

Programmer

overyde

Programmer

faadiel

Programmer

overyde

Programmer

faadiel

Programmer

overyde

Programmer

Similar threads

Part and Inventory Search

Sponsor