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 8 of 8

Thread: Radio Buttons

  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Radio Buttons

    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.

  • #2
    New Coder
    Join Date
    Feb 2006
    Location
    Texas
    Posts
    80
    Thanks
    1
    Thanked 8 Times in 8 Posts
    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
    Code:
    <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.
    Code:
    <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>
    Last edited by Truffle; 07-26-2011 at 04:15 PM.

  • #3
    Senior Coder
    Join Date
    Feb 2011
    Location
    Your Monitor
    Posts
    4,346
    Thanks
    60
    Thanked 527 Times in 514 Posts
    Why is this in a php forum? - This is a html/javascript question.
    See my new CodingForums Blog: http://www.codingforums.com/blogs/tangoforce/

    Many useful explanations and tips including: Cannot modify headers - already sent, The IE if (isset($_POST['submit'])) bug explained, unexpected T_CONSTANT_ENCAPSED_STRING, debugging tips and much more!

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Truffle View Post
    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
    Code:
    <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.
    Code:
    <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

  • #5
    New Coder
    Join Date
    Feb 2006
    Location
    Texas
    Posts
    80
    Thanks
    1
    Thanked 8 Times in 8 Posts
    here's a better version of the javascript function

    Code:
    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';
      }
    }

  • #6
    Regular Coder poyzn's Avatar
    Join Date
    Nov 2010
    Posts
    266
    Thanks
    2
    Thanked 61 Times in 61 Posts
    Have you tried without js?
    Code:
    <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>

  • #7
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,092
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Followed here from the JS forum. Why in php?
    Code:
    <!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>

  • #8
    Regular Coder
    Join Date
    Jul 2003
    Posts
    117
    Thanks
    0
    Thanked 17 Times in 17 Posts
    See this page for an example:
    http://www.javascript-coder.com/jque...tor-this.phtml

    The example has <li> instead of <tr>


  •  

    LinkBacks (?)


    Posting Permissions

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