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 SkipVought 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
- Thread starter anuj576
- Start date
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]
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]
- Thread starter
- #3
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]
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.
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.
- Thread starter
- #6
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]
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]
- Thread starter
- #8
Would you like to share the solution so that somebody else might benefit from it as well?
___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
- Thread starter
- #10
<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
<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
Similar threads
- Locked
- Question
- Locked
- Question