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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically "checked" radio buttons?

    Hello,
    Is it possible to dynamically select a radio button based on its value?

    I want to load a variable e.g. $data{variable} into a javascript that would dynamically "check" the correct radio button

    if variable = green, then the green radio button would be checked etc etc.

    <form>
    <input type="radio" name="color" value="red">
    <input type="radio" name="color" value="blue">
    <input type="radio" name="color" value="green"> <-dynamically checked
    <input type="radio" name="color" value="yellow">
    <form>

    Thanks

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    try this:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    function 
    checkV(f,v){
    var 
    f.elements['color'];
    for(var 
    i=0;i<c.length;i++){
    c[i].checked=(c[i].value==v)?true:false;
    }
    }
    </script>
    </head>
    <body>
    <form>
    insert a color (red, blue, green or yellow)<input type="text" onkeyup="checkV(this.form,this.value)"><br>
    <input type="radio" name="color" value="red">red<br>
    <input type="radio" name="color" value="blue">blue<br>
    <input type="radio" name="color" value="green">green<br>
    <input type="radio" name="color" value="yellow">yellow
    </form>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function NoAgain(col){
     ips=document.getElementsByTagName('INPUT');
     for (i=0;i<ips.length;i++){
      if (ips[i].type=='radio'&&ips[i].value==col){
       ips[i].checked=true;
      }
     }
    }
    
    //-->
    </script>
    </head>
    
    <body onload="NoAgain('green');" >
    <form>
    <input type="radio" name="color" value="red">
    <input type="radio" name="color" value="blue">
    <input type="radio" name="color" value="green"> <-dynamically checked
    <input type="radio" name="color" value="yellow">
    <form>
    </body>
    
    </html>

  • #4
    New Coder
    Join Date
    Aug 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys,
    I ended up using vwphillips code. Much appreciated

  • #5
    New Coder
    Join Date
    Aug 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've been sucessfully using vwphillips code for a few months now.

    Only problem is that my radio list has become too large, and I need to convert to a drop-down list.

    So I need to convert the script to dynamically select a value from the drop down list (e.g. green).

    <form>
    <select name="colors">
    <option value="red">Red
    <option value="blue">Blue
    <option value="green">Green <--dynamically selected
    <option value="yellow">Yellow
    </select>
    </form>

    Any help would be much appreciated.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,467
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    function NoAgain(col){
     sel=document.getElementsByTagName('SELECT');
     for (i=0;i<sel.length;i++){
      for (i1=0;i1<sel[i].options.length;i1++){
       if (sel[i].options[i1].value==col){
        sel[i].selectedIndex=i1;
       }
      }
     }
    }
    
    //-->
    </script>
    </head>
    
    <body onload="NoAgain('green');" >
    <form>
    <select name="colors">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green <--dynamically selected</option>
    <option value="yellow">Yellow</option>
    </select>
    </form>
    
    </body>
    
    </html>

  • #7
    New Coder
    Join Date
    Aug 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again vwphillips.
    Your help has really been appreciated. The code worked perfectly!


  •  

    Posting Permissions

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