Radio Buttons

SAFCliam

07-26-2011, 03:49 PM

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.

Truffle

07-26-2011, 04:07 PM

This is a javascript question but if you want it to still process it as a form and have PHP read selected values based on selected rows then you'll need to use some javascript and css magic.

I'm no expert but this is what I would do:

You'll still need your radio buttons. You'll need to add CSS to keep your radio buttons hidden

<input type="radio" name="crime" value="4" id="4" style="display:none" />

There should be one hidden radio button for each table row you want selected

You'll need to add an onClick event to your tr fields . The onclick event should start a javascript function that sets the corresponding radio button's status to on or checked.

<script>
function selectRadio( rowid, id )
{
document.getElementById(id).checked = true;
rowid.style.background = 'blue'
}
</script>

<tr onClick=selectRadio(this, '4')>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

tangoforce

07-26-2011, 04:07 PM

Why is this in a php forum? - This is a html/javascript question.

SAFCliam

07-26-2011, 04:16 PM

This is a javascript question but if you want it to still process it as a form and have PHP read selected values based on selected rows then you'll need to use some javascript and css magic.

I'm no expert but this is what I would do:

You'll still need your radio buttons. You'll need to add CSS to keep your radio buttons hidden

<input type="radio" name="crime" value="4" id="4" style="display:none" />

There should be one hidden radio button for each table row you want selected

You'll need to add an onClick event to your tr fields . The onclick event should start a javascript function that sets the corresponding radio button's status to on or checked.

<script>
function selectRadio( rowid, id )
{
document.getElementById(id).checked = true;
document.getElementById(rowid).style.background = 'blue;'
}
</script>

<tr onClick=selectRadio(this, '4')>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

thanks i didnt no this would be a Javascript topic

Truffle

07-26-2011, 04:19 PM

here's a better version of the javascript function

function selectRadio( rowid, id )
{
var obj = document.getElementById(id);
if( !obj.checked ) {
obj.checked = true;
rowid.style.background = 'blue';
}
else {
obj.checked = false;
rowid.style.background = 'white';
}
}

poyzn

07-26-2011, 06:48 PM

Have you tried without js?

<input type="radio" name="crime" value="4" id="radio-bttn-4" />
<table>
<tr>
<td><label for="radio-bttn-4">Blah blah</label></td>
<td><label for="radio-bttn-4">Blah blah</label></td>
</tr>
</table>

jmrker

07-27-2011, 02:17 AM

Followed here from the JS forum. Why in php? :confused:

<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function BGchange(IDS) {
var sel = document.getElementById(IDS);
sel.style.backgroundColor = (sel.style.backgroundColor == '') ? 'yellow' : '';
}
</script>
<style type="text/css">
td { width:50px; }
</style>

</head>
<body>

<table border="1">
<caption> Table </caption>
<tr id="r1">
<td onclick="BGchange('r1')"> 1 </td>
<td onclick="BGchange('r1')"> 2 </td>
</tr>
<tr id="r2">
<td onclick="BGchange('r2')"> 3 </td>
<td onclick="BGchange('r2')"> 4 </td>
</tr>
</table>

</body>
</html>

prasanthmj

07-27-2011, 10:27 AM

See this page for an example:
http://www.javascript-coder.com/jquery/jquery-selector-this.phtml

The example has <li> instead of <tr>