Radio field OnChange background colour

vorl · 02-29-2012, 01:00 PM

Hello All
I was hoping you guys can help. I have 3 radio fields which when clicked on I want it to change the background colour of the table its within. The radio fields have the same name so only one can be selected at once.

At the moment its changing the background yellow but if I click another radio field its not resetting back to normal (white). Im not sure how to achieve this is javascript...

Here is the code im using now:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" language="javascript">

function swapColor(oCheckbox) {
     var pop = oCheckbox, checkedcolor = 'yellow';
     while (pop.nodeType != 1 || pop.nodeName.toLowerCase() != 'table') 
            pop = pop.parentNode;
     if (typeof pop.oldcolor == 'undefined') pop.oldcolor = pop.style.backgroundColor;
     pop.style.backgroundColor = (oCheckbox.checked) ? checkedcolor : pop.oldcolor;
}

</script>
</head>

<body>

<table>
<tr>
<td> 
<input type="radio" name="change" value="0" onchange="swapColor(this) checked" />11111111
</td>
</tr>
</table>

<table>
<tr>
<td> 
<input type="radio" name="change" value="1" onchange="swapColor(this)" />22222222
</td>
</tr>
</table>

<table>
<tr>
<td> <input type="radio" name="change" value="2" onchange="swapColor(this)" />33333333
</td>
</tr>
</table>

</body>
</html>

I would appreciate any help! Thanks!

Philip M · 02-29-2012, 01:27 PM

When the function is called set the background color of all the fields to white. The one that is checked will be changed to yellow.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

vorl · 02-29-2012, 01:36 PM

Quote:

Originally Posted by Philip M

When the function is called set the background color of all the fields to white. The one that is checked will be changed to yellow.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Im sorry Philip, but would you be able to show me the code for that?

And btw, if there is a better function to achieve this please tell me...I dont have to use the current one...

Philip M · 02-29-2012, 02:04 PM

Is this what you are trying to achieve?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">

function swapColor(box) {
document.getElementById("td1").style.backgroundColor = "white";  // simplest way if only three fields
document.getElementById("td2").style.backgroundColor = "white";
document.getElementById("td3").style.backgroundColor = "white";
document.getElementById(box).style.backgroundColor = "yellow";
}

</script>
</head>

<body>


<table>
<tr>
<td><input type="radio" name="change" value="1" onclick="swapColor('td1')" /></td>
<td id = "td1"> 11111111</td>
</tr>
<tr>
<td><input type="radio" name="change" value="1" onclick="swapColor('td2')" /></td>
<td id = "td2"> 22222222</td>
</tr>
<tr>
<td><input type="radio" name="change" value="2" onclick="swapColor('td3')" /></td>
<td id = "td3"> 33333333</td>
</tr>
</table>

</body>
</html>

I do not understand why you have multiple tables. I get the idea that you have tried to adapt the code from somewhere else, but without really knowing how to. You cannot use onchange with radio buttons - onclick is correct.

vorl · 02-29-2012, 02:39 PM

Quote:

Originally Posted by Philip M

Is this what you are trying to achieve?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">

function swapColor(box) {
document.getElementById("td1").style.backgroundColor = "white";  // simplest way if only three fields
document.getElementById("td2").style.backgroundColor = "white";
document.getElementById("td3").style.backgroundColor = "white";
document.getElementById(box).style.backgroundColor = "yellow";
}

</script>
</head>

<body>


<table>
<tr>
<td><input type="radio" name="change" value="1" onclick="swapColor('td1')" /></td>
<td id = "td1"> 11111111</td>
</tr>
<tr>
<td><input type="radio" name="change" value="1" onclick="swapColor('td2')" /></td>
<td id = "td2"> 22222222</td>
</tr>
<tr>
<td><input type="radio" name="change" value="2" onclick="swapColor('td3')" /></td>
<td id = "td3"> 33333333</td>
</tr>
</table>

</body>
</html>

I do not understand why you have multiple tables. I get the idea that you have tried to adapt the code from somewhere else, but without really knowing how to. You cannot use onchange with radio buttons - onclick is correct.

Thank you! Thats exactly what I wanted! The reason for multiple tables is there is code which I cant change much as its been done already. The code I provided is basically a cut down version of the actual tables.

There is a little issue in that there is no preset limit to the amount of radio fields. Would you be able to adapt your code for this?

Thank you so much again!

Philip M · 02-29-2012, 03:08 PM

Quote:

Originally Posted by vorl

There is a little issue in that there is no preset limit to the amount of radio fields. Would you be able to adapt your code for this?

It helps if you make your requirements clear at the outset. Are all the radio buttons part of the same group?

vorl · 02-29-2012, 03:35 PM

Quote:

Originally Posted by Philip M

It helps if you make your requirements clear at the outset. Are all the radio buttons part of the same group?

Sorry about that, I should have made it clearer.

Ok so to be clear...
- there is no limit to the number of radio buttons in one group
- there could be more than 1 group of radio buttons on the page (eg. there could be 3 groups of radio buttons which when they are clicked on, it shouldnt effect the other group).

Let me know if im not being clear. Thank you for all your help again!

Philip M · 02-29-2012, 03:39 PM

Code:

function swapColor(box) {

var r = document.getElementsByName("change");  // all the radio buttons with the name change
var len = r.length;
for (var i =1; i <= len; i++) {
var x = "td" + i;
document.getElementById(x).style.backgroundColor = "white";
}
document.getElementById(box).style.backgroundColor = "yellow";
}

</script>

It will probably be simplest to repeat this function (with a different name of course) for your other radio groups. And of course change the ids of the <td>s in other radio groups to (say) tdB1, tdB2 etc.

vorl · 02-29-2012, 04:18 PM

Quote:

Originally Posted by Philip M

Code:

function swapColor(box) {

var r = document.getElementsByName("change");  // all the radio buttons with the name change
var len = r.length;
for (var i =1; i <= len; i++) {
var x = "td" + i;
document.getElementById(x).style.backgroundColor = "white";
}
document.getElementById(box).style.backgroundColor = "yellow";
}

</script>

It will probably be simplest to repeat this function (with a different name of course) for your other radio groups. And of course change the ids of the <td>s in other radio groups to (say) tdB1, tdB2 etc.

Thanks for that! Im sorry to be a pain but as im not sure how many radio groups there will be im not sure if repeating the function will be the best plan.

Any chance you can make it a generic function so we can have just one function for all radio groups?

Philip M · 02-29-2012, 05:30 PM

Quote:

Originally Posted by vorl

Thanks for that! Im sorry to be a pain but as im not sure how many radio groups there will be im not sure if repeating the function will be the best plan.

Any chance you can make it a generic function so we can have just one function for all radio groups?

Why not? If a radio group does not exist the function cannot be called. (But be aware that in IE a radio group if it exists must have at least two buttons).

To use one function only for all of an unknown number of radio groups would mean considerable re-writing of your code, including the names and ids. Initially you said "I have 3 radio fields" which I took to mean 3 radio buttons. You keep adding to the specification.

vorl · 03-01-2012, 12:11 AM

Please accept my apologies Philip

I must admit this hasnt been my clearest thread!

I will try to clarify myself...

- There will always be at least 2 radio buttons on the page.
- There will be at least 2 radio groups on the page.
- There is no limit to the amount of radio buttons or groups on the page.

So thats why I think a generic function would be better. Sorry again about me not being clear but hopefully this should be it.

Thanks and I really appreciate your help and patience!

Philip M · 03-01-2012, 08:40 AM

Quote:

Originally Posted by vorl

- There is no limit to the amount of radio buttons or groups on the page.

Surely not!

This is the best I can do:-

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">

function swapColor(box) {
var gr = box.substr(2,1); // extract the group number, a single digit
var grp = "group" + gr;  // group1, group2 and so on
var r = document.getElementsByName(grp);  
var len = r.length;   // how many radios in this group?
for (var i =1; i <= len; i++) {
var x = "td" + gr + "-" +  i;  // the element id
document.getElementById(x).style.backgroundColor = "white";  // set them all to white
}
document.getElementById(box).style.backgroundColor = "yellow";  // set the selected one to yellow
}

</script>
</head>

<body>

<form name = "myform">
<table>
<tr>
<td><input type="radio" name="group1" value="1" onclick="swapColor('td1-1')" /></td>
<td name = "td1-1" id = "td1-1"> 11111111</td>
</tr>
<tr>
<td><input type="radio" name="group1" value="2" onclick="swapColor('td1-2')" /></td>
<td name = "td1-2" id = "td1-2"> 22222222</td>
</tr>
<tr>
<td><input type="radio" name="group1" value="3" onclick="swapColor('td1-3')" /></td>
<td name = "td1-3" id = "td1-3"> 33333333</td>
</tr>
</table>
<br>
<table>
<tr>
<td><input type="radio" name="group2" value="1" onclick="swapColor('td2-1')" /></td>
<td name = "td2-1" id = "td2-1"> 11111111</td>
</tr>
<tr>
<td><input type="radio" name="group2" value="2" onclick="swapColor('td2-2')" /></td>
<td name = "td2-2" id = "td2-2"> 22222222</td>
</tr>
<tr>
<td><input type="radio" name="group2" value="3" onclick="swapColor('td2-3')" /></td>
<td name = "td2-3" id = "td2-3"> 33333333</td>
</tr>
<tr>
<td><input type="radio" name="group2" value="4" onclick="swapColor('td2-4')" /></td>
<td name = "td2-4" id = "td2-4"> 44444444</td>
</tr>

</table>

</form>

</body>
</html>

Note that the code requires a specific format to the ids of the <td>s, that is "td1-1" and so on, and the groups must be given names of group1, group2 etc. As it stands it will not work if there are more than 9 radio groups (i.e. a single digit) - you will have to work out how to deal with that if required (very simple

). But there is no limit to the number of radio buttons in each group.

I trust that we have finished with this now. We are always willing to help, but this is veering towards getting someone to write your complete code for you.

vorl · 03-01-2012, 10:53 AM

Thank you so much! Its perfect

I appreciate all your help in this!

Philip M · 03-01-2012, 11:05 AM

Glad you happy now!