Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Radio field OnChange background colour

    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!
    Last edited by vorl; 02-29-2012 at 01:12 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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...

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.
    Last edited by Philip M; 02-29-2012 at 02:07 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    vorl (02-29-2012)

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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!

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by vorl View Post
    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?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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!

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.
    Last edited by Philip M; 02-29-2012 at 03:52 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    vorl (02-29-2012)

  • #9
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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?

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by vorl View Post
    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.
    Last edited by Philip M; 02-29-2012 at 05:37 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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!

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by vorl View Post
    - 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.
    Last edited by Philip M; 03-01-2012 at 09:05 AM. Reason: Typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    vorl (03-01-2012)

  • #13
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thank you so much! Its perfect

    I appreciate all your help in this!

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Glad you happy now!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •