Associating links with radio's or even checkBoxes...

**rainarts** · 07-26-2008, 09:11 AM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Working With Radio</title>

Code:

<script type="text/javascript">
<!--Hiding
function surfTo()
{ var tradio = document.getElementById('r1');
var tradio0 = document.getElementById('r2');
tradio = ( tradio.checked == true ? window.document.location.href = "http://htmlfreak.wen.ru" : tradio );
tradio0 = ( tradio0.checked == true ? window.document.location.href = "http://www.rainarts.net46.net//guestbook/index.php" : tradio0 );
}// Done hiding -->
</script>

HTML Code:

</head>
<body>
<p align="left">
<form>
<center>
<input id="r1" type="radio" onClick="surfTo()" /><b> myHTML</b>
<input id="r2" type="radio" onClick="surfTo()" /><b> myPHP</b></center>
</form>
</p>
</body>
</html>

**jscheuer1** · 07-26-2008, 01:25 PM

Wow rainarts, you are answering questions before anyone asks them. However, I believe there is a better way to do that. And your code is invalid. I don't mean that it won't work. I don't know for sure, I haven't tested it. I mean that it doesn't conform to the standards of the DOCTYPE you've shown.

Try this version:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!-- 
form {
margin:0;
}
form div {
text-align:center;
margin:2em;
} 
-->
</style>
<script type="text/javascript">
<!-- 
document.onclick = function(e){
e = e? e : window.event;
var t = e.target? e.target : e.srcElement;
if (t.name && t.name == 'nav' && t.checked)
window.location = t.value;
}
// -->
</script>
</head>
<body>
<form action="#" onsubmit="return false;">
<div>
<label for="r1"><input id="r1" name="nav" value="http://www.google.com/" type="radio"><b> Google</b></label>
<label for="r2"><input id="r2" name="nav" value="http://www.dynamicdrive.com/" type="radio"><b> Dynamic Drive</b></label>
</div>
</form>
</body>
</html>

But I fail to see much utility in the basic idea to begin with.

**rainarts** · 07-26-2008, 01:44 PM

Why make things more confusing, when we can make it simple! Mine is a simplified version of that code you provide me! I double dare to try my code and see how it works for you...

**jscheuer1** · 07-26-2008, 01:53 PM

Your version isn't simpler in my view. I just added the label tags for greater utility (you can click on the text and still navigate). The added style is just the proper way to format content. In essence, my version is very simple -

Required script code:

Code:

document.onclick = function(e){
e = e? e : window.event;
var t = e.target? e.target : e.srcElement;
if (t.name && t.name == 'nav' && t.checked)
window.location = t.value;

Required markup:

Code:

<input name="nav" value="http://www.google.com/" type="radio"><b> Google</b>
<input name="nav" value="http://www.dynamicdrive.com/" type="radio"><b> Dynamic Drive</b>

However, it doesn't matter to me if your code works or not. It's still invalid HTML, see:

http://validator.w3.org/

And, as I said, I see very little utility in this. How do you envision this idea being useful?

**rainarts** · 07-26-2008, 02:03 PM

Well wot else can i say! But the thing is, my code stil works! But i do appreciated on how you show it right! Tnx...

Thread: Associating links with radio's or even checkBoxes...

Thread Tools

Search Thread

Associating links with radio's or even checkBoxes...

It will work and am sure about it!

Well wot else can i say!

Bookmarks

Bookmarks

Posting Permissions