Click to See Complete Forum and Search --> : Radio Button Drop down menu problem


Fiji
07-07-2005, 06:18 AM
Hi All,

I'm new to this forum and I'm just a novice when it comes to HTML, so I was wondering if anyone could help me?

My problem is as follows.

I'm trying to create a drop down menu that lists a set of URLs/links or options when a specific radio button is checked.

For example, you have four radio buttons named "A", "B", "C" and "D" and next to that you have a drop down menu with a submit button.

When you click on radio box "A", a list "A" appears on the drop down menu and you will have a set of links or options to pick from. One can then pick something from the list, hit submit and gets redirected in a new frame to that specific page/URL/link or option.

The same when you click radio box "B", you get a new list "B" in the drop down menu.

I've tried looking for HTML codes or tips on how to do this online but without any success.

looking forward to any replies concerning this,

if I havent made my self 100% clear kindly let me know and I'll attempt to explain the problem again.

Thanks,

Patrick.

graatz
07-07-2005, 08:20 AM
Here's a working page describing what you're asking for... realize that dynamic content must be manipulated in code other than HTML (in this case JavaScript) so you should familiarize yourself with it before trying to taylor this to your needs :)


<html>
<head>
<title>Drop Down Radio Test</title>
<script type="text/javascript">
<!--

function changeMenu() {
if(theForm.theRadio[0].checked) {
theForm.theMenu[1].firstChild.data = "http://www.webdeveloper.com/";
theForm.theMenu[2].firstChild.data = "http://www.yahoo.com/";
} else {
theForm.theMenu[1].firstChild.data = "http://www.w3.org/";
theForm.theMenu[2].firstChild.data = "http://www.google.com/";
}
}

function doTheLink() {
if(!theForm.theRadio[0].checked && !theForm.theRadio[1].checked) {
alert("Choose A or B first");
return;
}
if(theForm.theMenu.value == "Nothing") {
alert("Select a link from the list");
return;
}
var i=0;
if(theForm.theMenu.value == "one") {
i=1;
} else {
i=2;
}
window.open(theForm.theMenu[i].firstChild.data);
}

//-->
</script>
</head>
<body onload="theForm.theRadio[0].checked=false;theForm.theRadio[1].checked=false">
<form name="theForm">
<input name="theRadio" type="radio" value="A" onclick="changeMenu()">A</input>
<input name="theRadio" type="radio" value="B" onclick="changeMenu()">B</input>
<br>
<select name="theMenu">
<option value="Nothing">Select A or B above</option>
<option id="C" value="one">---</option>
<option id="D" value="two">---</option>
</select>
<input type="button" value="Follow Link" onclick="doTheLink()">
</form>
</body>
</html>


I'd like to see the options invisible until a radio is checked, but for no good reason I couldn't get them to work out that way... if you want the same effect, you could pose a question in the javascript forum ... i'm just too lazy to myself atm :p

Fiji
07-07-2005, 11:49 PM
wow, fantastic! Thanks graatz your code helped a great deal. It was exactly what I was looking for. I'll certainly read up more on Javascript and as you said familiarise myself with it.

Cheers a million times.

Patrick

Fiji
07-08-2005, 07:54 AM
Hi Graatz,

I'm sorry to bug you again with another question, I've tried all day to understand the logic behind the code, so far I get how everything works, but what I dont get is how to load the page in frames. :confused: :confused:

To be more precise, the radio drop down box is on a menu on the left frame, and when an option is selected the page should open in the right frame.

however with the code you gave, it opens in a new window alltogether.

I was wondering if its not too much to ask if you could explain how I could do this.

Kind regards,

Patrick

graatz
07-14-2005, 11:25 AM
sorry for the delay......

the line you're looking to fix is:
window.open(theForm.theMenu[i].firstChild.data);

what you'll want to do is something like this:
window.frames("frameID").location = theForm.theMenu[i].firstChild.data;

At least that should work... let me know if that doesn't help ya or if you're still confused about my code :)