SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Autoselecting Radio Buttons

    Hi guys

    I've created a radio button group, and created the appropriate labels so that both the radio button themselves and the text label can be clicked to select the particular radio button desired.

    However, two of the radio button options are drop down select boxes. I have put the select input inside the label tags and am getting different results from IE and FF.

    FF is selecting the appropriate radio button, but I can't click and select from the select box, I have to drag down to the option as when I let go of the button the select box closes

    IE's select box works as expected but the radio button never selects.

    Here is a simple example of my code:

    HTML Code:
    <p><input type="radio" name="option" value="1" id="a"/> <label for="a">Label 1</label></p>
    <p><input type="radio" name="option" value="2" id="b"/> <label for="b">Label 2</label></p>
    <p><input type="radio" name="option" value="3" id="c"/> <label for="c"><select name="select"><option value="1">Option 1</option><option value="2">Option 2</option></select></label></p>
    Any ideas how to fix this behaviour?
    Last edited by Antnee; Jun 6, 2008 at 10:43. Reason: Replaced ids with letters

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You can't have the same label for two different form elements, so you need to split up your select and radiobutton elements.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, IDs may not begin with a number; they must start with a letter (A-Z or a-z).
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    C. Ankerstjerne, you've confused me, I don't have a label that applies to more than one element, the select box is the label for the radio button

    AutisticCuckoo, humour me, I just made up some code that demonstrates roughly what I am seeing. Forget the actual value of the ids, I made them up

    Is anyone actually able to tell me how to get the radio button to be selected automatically when the select box is used, rather than telling me what I shouldn't do?

  5. #5
    SitePoint Addict Belfast75's Avatar
    Join Date
    Oct 2005
    Location
    London, England
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I'm not 100% sure what you're looking for.

    HTML Code:
    <label for="a">Label 1</label>
    <select id="a">
    	<option value ="1">1</option>
    	<option value ="2">2</option>
    	<option value ="3" selected="selected">3</option>
    	<option value ="4">4</option>
    </select>
    Is this what you're talking about?

  6. #6
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No, what I want is that when I choose something from the select box, that a radio button next to it will become selected.

    Basically, you have three 'search' options, the first two are simple text labels, but the third requires more information, so has a drop down select box to allow the 'searcher' to pick the rest of the parameters.

    The actual search itself works fine, it's just getting that radio button to automatically select when the select box is chosen is where I'm stuck. That is all

    Thanks for your effort though

  7. #7
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is some sample code that does what you describe. I took it from a page in my product. My customers use Firefox, IE-6, and IE-7.


    PHP Code:
    <script type="text/javascript">
        function 
    setByCompany()
        {
            
    radioButton document.getElementById'selectByCompany' );
            
    radioButton.checked true;
        }
    </script>

    <table>
        <td class="label">
            <input type="radio" id="selectByCompany" name="selectionType" value="vehicle"/>
            <label for="selectByCompany">Select by company</label>
        </td>
        <td class="val">
            Company Name:<br/>
            <select class="selectFont" onchange="setByCompany();" style="width: 270px;" name="clientId">
                <option value="1">Company 1</option>
                <option value="2">Company 2</option>
                <option value="3">Company 3</option>
            </select>
       </td>
    </table> 
    Hope this helps....
    mikem

  8. #8
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That looks pretty much like what I need, yeah. Unfortunately I'm home from work now until Monday morning, but I shall give it a shot on Monday. Thanks Mike!

  9. #9
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Antnee
    C. Ankerstjerne, you've confused me, I don't have a label that applies to more than one element, the select box is the label for the radio button
    Your third label is, semantically, set to be the label for both the third radio button and the select, as you can associate a label to a form element both by using the FOR-attribute and by nesting the form element inside the label.

    AutisticCuckoo, humour me, I just made up some code that demonstrates roughly what I am seeing. Forget the actual value of the ids, I made them up

    Is anyone actually able to tell me how to get the radio button to be selected automatically when the select box is used, rather than telling me what I shouldn't do?
    If you're asking people to troubleshoot a problem, then you should expect people to comment on the potential problems in your code.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  10. #10
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    Your third label is, semantically, set to be the label for both the third radio button and the select, as you can associate a label to a form element both by using the FOR-attribute and by nesting the form element inside the label.
    I see what you're saying, and while you are right to point out a potential, or even very real problem, I was asking for a resolution, not finger pointing.


    Quote Originally Posted by C. Ankerstjerne View Post
    If you're asking people to troubleshoot a problem, then you should expect people to comment on the potential problems in your code.
    ... yep, and then suggest a fix. Anyone can moan that something is incorrect, but not everyone can provide a solution as it seems

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Antnee View Post
    AutisticCuckoo, humour me, I just made up some code that demonstrates roughly what I am seeing. Forget the actual value of the ids, I made them up
    Okay, sorry (no offence meant). It's a mistake that's quite common, and a surprising number of developers don't know about it.
    Birnam wood is come to Dunsinane

  12. #12
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mike, that worked perfectly.

    AutisticCuckoo, no harm done eh?


Tags for this Thread

Bookmarks

Posting Permissions

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