#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    14
    Rep Power
    0

    auto check radio button based on selected drop down menu


    hi,
    i'm creating this application form that requires student's personal details and newbie in javascript. the intention is to auto-check the gender once user choose the relationship option accordingly; if user choose Father or Son, then auto-check at radio button is Male, else the auto-check button is set to Female.

    <td>Relationship to Student</td>
    <select name="T_RELATIONSHIP">
    <td><option value='Father'>Father</option>
    <option value='Mother'>Mother</option>
    <option value='Son'>Son</option>
    <option value='Daughter'>Daughter</option>
    </select></td>

    <td>Gender</td>
    <td><label><input type=radio name="T_GENDER" value="M">Male</label>
    <input type=radio name="T_GENDER" value="F">Female</label></td>

    i've viewed previous thread about enable/disable text field based on selected drop down menu, but have no idea how to auto-check the radio button based on selected drop down menu.
  2. #2
  3. Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Aug 2005
    Location
    Bucharest ROMANIA
    Posts
    2,557
    Rep Power
    604
    something like 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 
    autocheck(s,o){
    var 
    rs.form.elements['T_GENDER'];
    if(
    o!=0){(o==1||o==3)?r[0].checked=true:r[1].checked=true;}
    else{
    r[0].checked=r[1].checked=false;}
    }
    </script>
    </head>
    <body>
    <form>
    <select name="T_RELATIONSHIP" onchange="autocheck(this,this.selectedIndex)">
    <option>- choose relationship -</option>
    <option value='Father'>Father</option>
    <option value='Mother'>Mother</option>
    <option value='Son'>Son</option>
    <option value='Daughter'>Daughter</option>
    </select>
    <input type=radio name="T_GENDER" value="M">Male</label>
    <input type=radio name="T_GENDER" value="F">Female</label>
    </form>
    </body>
    </html> 
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    14
    Rep Power
    0
    ok, i have created a table using MySQL for the relationship data.
    this is how my table looks like;

    table name: RELATIONSHIP
    RELCODE RELDESC RELGENDER
    01 Father M
    02 Mother F
    03 Son M
    04 Daughter F

    And here's what i did so far, but unfortunately i still cannot get the gender value.
    PHP Code:
    <td>Relationship to Student </td>
    <td><select name=T_RELATIONSHIP onchange="javascript:submit_changes();">
    <?

    if ($form_action == "refresh")
    {
        
    $TT_RELATIONSHIP $T_RELATIONSHIP;
    }

    $sequel mysql_query("SELECT RELCODE, RELDESC, RELGENDER FROM RELATIONSHIP");
    echo 
    "<option value=''>--Choose Relationship--</option>\n";
    if (
    $rs mysql_fetch_array($sequel))
    {
        
    $T_RELCODE $rs[0];
        
    $T_RELDESC $rs[1];
        
    $T_RELGENDER $rs[2];
        
    echo 
    "<option value='$T_RELCODE'>$T_RELDESC</option>\n";
    }
    ?>
    </select></td>

    <td>Gender </td>
    <td><label><input type="radio" name="T_GENDER" value="M" <? if ($T_RELCODE "M") { echo "checked"; }?>>Male</label>
    <label><input type="radio" name="T_GENDER" value="F" <? if ($T_RELCODE "F") { echo "checked"; } ?>>Female</label></td>

    <script language="javascript">
    function submit_changes()
    {
        document.FORM_RELATION.form_action.value = "refresh";
        document.FORM_RELATION.submit();
    }

    </script>
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    14
    Rep Power
    0
    yup, those function posted by KorRedDevil actually works well...i tested it again and it should be fine now. thanks buddy, that is what exactly i wanted.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    3
    Rep Power
    0
    Im trying to do the same thing but with only 1 radio button but i cant seem to get the code right.
    Any help to get this part working would be awesome!!!!!
    Code:
    <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 autocheck(s,o){ var r= s.form.elements['RBCVDI'];
     if(o!=1){(o==0||o==0)?r[1].checked=true:r[0].checked=true;}
     else{r[0].checked=r[1].checked=false;} } 
    </script> 
     </head>
    <body> 
    <form>
     <select name="Test1, Test2, Test3?" onchange="autocheck(this,this.selectedIndex)" id="colrbcuk">
     <option>- choose relationship -</option> 
    <option value='Test1'>Test1</option> 
    <option value='Test2'>Test2</option>
     <option value='Test3'>Test3</option>
     <option value='n/a'>n/a</option> 
    </select> 
    
    <input type=radio name="RBCVDI" value="M" id="extratemp8"  onFocus="show(document.getElementById('RBCVDI'))"  />RBC/VDI&nbsp; 
    </form>
     </body>
     </html>
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    3
    Rep Power
    0
    any help on this? this has been confusing me lately?
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Welcome to DevShed Forums, dslegends.

    This is one of the cases that while your code is based on code in an old thread, you'd be more likely to get help if you had started a new thread and mentioned this one. (There's no need to create a new thread about this at this point, however.)

    Radio buttons should be used in groups of two or more. I strongly recommend that you use a checkbox instead.

    We would be better able to help you if you explained what you were trying to do because you seem to be wanting to do something more complex than Kor's script did.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    3
    Rep Power
    0
    Thanks For Replying Back to Me,
    I did leave out a section of my code i did have 2 radio buttons in it originally but i was unable to get it working
    Code:
    <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 autocheck(s,o){ var r= s.form.elements['RBCVDI']; if(o!=1){(o==0||o==0)?r[1].checked=true:r[0].checked=true;} else{r[0].checked=r[1].checked=false;} } </script>  
    </head>
     <body> 
    <form> 
    <select name="Test1, Test2, Test3?" onchange="autocheck(this,this.selectedIndex)" id="colrbcuk"> 
    <option>- choose relationship -</option> 
    <option value='Test1'>Test1</option>
     <option value='Test2'>Test2</option> 
    <option value='Test3'>Test3</option> 
    <option value='n/a'>n/a</option>
     </select> 
    <input type=radio name="RBCVDI" value="M" id="extratemp8"  onFocus="show(document.getElementById('RBCVDI'))"  />RBC/VDI&nbsp; 
    <input  Group="temp1" name="temp1" id="endcall"   type="radio"  checked="checked" onFocus="show(document.getElementById('hideall'))" />End Call </form>
     </body>
     </html>
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    What makes radio buttons a group is having the same value for their "name" attribute. (Note that while names can be the same, IDs must be unique.) So you need to change the names to match.

    Also you should use <label> elements:
    Code:
    <label for="extratemp8"><input type="radio" name="RBCVDI" value="M" id="extratemp8"  onfocus="show(document.getElementById('RBCVDI'))"  />RBC/VDI&nbsp;</label> 
    <label for="endcall"><input type="radio" name="RBCVDI" id="endcall"  checked="checked" onfocus="show(document.getElementById('hideall'))" />End Call</label>
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo