hey guys,
I want to make a table but i want the first column of the table to have a radio button. On clicking the radio button i want the user to go to another page.
Please suggest some ideas or some coding which could help me.
anuj_sharma -3 Junior Poster
essential 84 Posting Shark Featured Poster
Heres how it goes, just dont forget to change the URL values' assigned to the radio buttons. Enjoy coding...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Associating links with radio button</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
/* i throw in some style attribution on this one, i know it look so lame! So youll have to modify this according to your taste. */
form { margin:0; }
form table { width: 200px; text-align: left; margin: 2px; background-color: #A6A6A6; }
form caption { background-color: #000000; font-weight: bold; color: #C0C0C0; padding: 2px; }
form td { background-color: #C0C0C0; color: #000000; padding-top: 2px; }
form th { color: #FFFFFF; magin: 0 auto; }
-->
</style><script type="text/javascript">
<!-- BEGIN HIDING
//Here's the code you need
//with the onclick event the
//user will be set to another
// location of your choice.
document.onclick = function(_radio)
{ _radio = _radio ? _radio : window.event;
var _target = _radio.target ? _radio.target : _radio.srcElement;
if (( _target.name ) && ( _target.name == 'nav' ) && ( _target.checked )) { window.location = _target.value;
}
}
// DONE HIDING -->
</script></head>
<body>
<form action="#" onSubmit="return false">
<table>
<caption>Select Location</caption>
<thead>
<tr>
<th scope="col">Location1</th>
<th scope="col">Location2</th></tr></thead></tr>
<td colspan="2">
<label for="r1">
<input id="r1" name="nav" value="http://www.your1stpage.com" type="radio" />Home</td>
<td>
<label for="r2">
<!-- Set The Desired URL value of your choice -->
<input id="r2" name="nav" value="http://www.your2ndpage.com" type="radio" />Downloads</td></tr>
</table>
</form>
</body>
</html> anuj_sharma commented: Just what i wanted +1
anuj_sharma -3 Junior Poster
Thanks a lot 'Essential'. This is just what i was looking for.
Thanks again.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.