PDA

View Full Version : Associating links with radio's or even checkBoxes...



rainarts
07-26-2008, 09:11 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Working With Radio</title>

<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>

</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:


<!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:


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:


<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...