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!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

RADIO BUTTON IN TABLE

Status
Not open for further replies.

anuj576

Programmer
Jul 20, 2008
14
IN
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.
 
1. You can easily put the radio button in the first column of the table. That's straightforward html.
2. For the redirecting the user to another page you would have to resort to javascript. Our buddies in forum216 can advise you on that.

I would however rethink the design. Clicking on a radio button does not imply redirecting to another page for most users. You're tampering with the default behaviour of radio buttons and that could upset some users.

Second, the only way you can achieve this effect is by employing javascript. In this way you're alienating certain users from navigating your site, most notably search engine robots.

Thirdly, any input elements should really be inside a form, so you have to deal with that as well. You could wrap the form around the whole table, but this might not be possible.

If clicking on a radio button will simply act as a link, I would suggest you rather use a regular link and style it so it looks similar to a radio button.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Well this is what i want to know!!!!!
I want to know how the input elemnts can be placed inside a table.
Please Help
 
Maybe it is time for you to start learning the language you want to work with. I suggest you inform yourself about html here:
This is not a coding service. This is a forum where computer professionals help other computer professionals with specific issues. Teaching you how to put input elements inside table cells falls out of scope of this site.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
I'm going to have to agree with Vrag, Putting elements doesn't change with location. Meaning if you know how to place an input element outside of a table you can put one inside the table just the same.


Just as a tip put the input element code i.e the <input type=radio...> between the cell tags in the table. i.e <td></td>




----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
I've tried to put the radio button inside the <td> tag but it's not working.
Please suggest some more ideas.
 
Please show some knowledge and initiative. Once again, this is not a coding service. We're here to help you, not to do things for you.

What have you tried (show us the code) and how is it not working? And, have you looked at the beginners' HTML tutorial? Sounds like you could benefit from it.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Thanks for the advice Vraga, but i have solved my problem.
 
<html>
<head>
<title>Associating links with radio button</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<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><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><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=" type="radio" />Home</td><td><label for="r2"> <!-- Set The Desired URL value of your choice --> <input id="r2" name="nav" value=" type="radio" />Downloads</td></tr></table></form></body></html></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=" type="radio" />Home</td>
<td>
<label for="r2">

<!-- Set The Desired URL value of your choice -->

<input id="r2" name="nav" value=" type="radio" />Downloads</td></tr>
</table>
</form>
</body>
</html>



THIS IS THE COMPLETE SOLUTION TO WHAT I WANTED
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top