how to create dynamic link based on the field selected from menu

920506 · Jun 25, 2004

Hi,
I need to create a text link dynamically. when users choose a category from option menu, the text link on the web page will link to the different content. I have several dynamic things happen at the same time based on the
value of the field.
thanks
Betty

920506 · Jun 25, 2004

Hi,
I did the following, but the problem is that when I change the option value, you have to click refresh button, in order for the link changed, anybody can fix that?
thanks
Betty

<body onload="start()">
<p>A drop down Deductible Menu</p>
<form method="POST" name="SendMe" >
<p>Deductible<select name="DropIt" size="1" onChange="start()" >
<option value="250"> $250 </option>
<option value="1000" selected> $1000</option>
<option value="1500"> $1500 </option>
<option value="2000"> $2000 </option>
</select> </p>

<p></p>
<p><div id="Coverage"></div></p>
<script language="JavaScript">
var v=document.SendMe.DropIt[document.SendMe.DropIt.selectedIndex].value;
if (v==1000) { output1="<a href='

http://www.yahoo.com'>";

output1 +="Coverage";
output1 +="</a>"
document.getElementById("Coverage").innerHTML=output1;
document.getElementById("Coverage").href="

http://www.yahoo.com";

}
if (v==250) { output1="<a href='

http://www.google.com'>";

output1 +="Coverage";
output1 +="</a>"
document.getElementById("Coverage").innerHTML=output1;
document.getElementById("Coverage").href="

http://www.google.com";

}
</script>

13sio · Jun 25, 2004

According to the snippet,

Code:

onload="start()"

Code:

onChange="start()"

there should be a function start() inside the script. Another,

Code:

 var v=document.SendMe.DropIt[document.SendMe.DropIt.selectedIndex].value;

can be replace by

Code:

 var v=document.SendMe.DropIt.value;

Hope the following modification helps,

Code:

<body onload="start()">
<p>A drop down Deductible Menu</p>
 <form method="POST" name="SendMe" >
    <p>Deductible<select name="DropIt" size="1" onChange="start()" >
        <option value="250">  $250 </option>
        <option value="1000" selected> $1000</option>
        <option value="1500"> $1500 </option>
        <option value="2000"> $2000 </option>
    </select> </p>
    
 <p></p>
    <p><div id="Coverage"></div></p> 

<script language="JavaScript">
[COLOR=orange]function start() {
  var v=document.SendMe.DropIt.value;[/color]
  if (v==1000)      { output1="<a href='[URL unfurl="true"]http://www.yahoo.com'>";[/URL]
                          output1 +="Coverage";
                        output1 +="</a>"
                    document.getElementById("Coverage").innerHTML=output1;
                  document.getElementById("Coverage").href="[URL unfurl="true"]http://www.yahoo.com";[/URL]
                  }
  if (v==250)            { output1="<a href='[URL unfurl="true"]http://www.google.com'>";[/URL]
                          output1 +="Coverage";
                        output1 +="</a>"
                    document.getElementById("Coverage").innerHTML=output1;
                  document.getElementById("Coverage").href="[URL unfurl="true"]http://www.google.com";[/URL]
                  }
[COLOR=orange] }[/color]
</script>

vbkris · Jun 26, 2004

i made a small code, try it:

Code:

<html>
<script>
function start(TheValue)
{
	document.getElementById("TheLink").href=TheValue
	document.getElementById("TheLink").innerText=TheValue
}
</script>
<form method="POST" name="SendMe" >
    <p>Deductible<select name="DropIt" size="1" onChange="start(this.value)" >
        <option value="250">  $250 </option>
        <option value="1000" selected> $1000</option>
        <option value="1500"> $1500 </option>
        <option value="2000"> $2000 </option>
    </select> </p>
   <br>
<a href="#" id='TheLink'></a>
</form>
</html>

Known is handfull, Unknown is worldfull

920506 · Jun 28, 2004

thank you both, 13sio and vbkris.
13 sio, you really made a good point.
Betty

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!

how to create dynamic link based on the field selected from menu

920506

Programmer

920506

Programmer

13sio

Technical User

vbkris

Programmer

920506

Programmer

Similar threads

Part and Inventory Search

Sponsor