SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2004
    Location
    Fort Lauderdale
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using a link to activate a radio button

    Hi,

    I have a form with 3 radio buttons:
    Code:
    <tr>
    		<td><input type=radio name="planid" id="planid" value="1"></td>
    		<td align="left"><a href="" class="b bubble" title="Click Here For The Individual Plan">Individual</a> 
    		</td>	  
    	</tr>
    	<tr>
    			<td><input type=radio name="planid" id="planid" value="2"></td>
    			<td align="left"><a href="#" class="b bubble">Couples/Buddies</a> 
    			</td>
    			 
    	</tr>
    </table>
    I would like to be able to click on the link next to the radio and have that radio be checked upon the clicking...how do I do this darn thing?

    Thanks

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoa. Slow down. You don't need a link or JavaScript. You need a <label>, which is the proper way to do that. Check these out:

    Simple Tricks for More Usable Forms: Labels
    Accessible HTML/XHTML Forms
    Accessible forms: Guidelines, examples and accessible JavaScript tricks.
    Prettier Accessible Forms
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2004
    Location
    Fort Lauderdale
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I tried with the lable but because I have 3 radio buttons it would not render propely.

    How do I do the label that corresponds to the right radio if all radios have the same name and ID?

    Thanks

  4. #4
    Take The Blue Pill neilmerton's Avatar
    Join Date
    Jul 2004
    Location
    Leicester, UK
    Posts
    871
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should never have multiple elements on a page with the same id - that defeats the purpose of having ids.

    I would change your ids to planid1 and planid2 - then you can successfully use the label to interact with the input elements.

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2004
    Location
    Fort Lauderdale
    Posts
    522
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but thats not how radio buttons work! I want them to be able to select only one radio!!!!!!!!!!!!!!!!!

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, it's the name that makes a radio button group, not the ID. The IDs don't have to match the names.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    Take The Blue Pill neilmerton's Avatar
    Join Date
    Jul 2004
    Location
    Leicester, UK
    Posts
    871
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's an example (from one of the links Kravvitz posted):

    Code:
    <label for="rad_0"><input type="radio" name="rad" id="rad_0" title="Red" checked="checked" /> Red</label>
    <label for="rad_1"><input type="radio" name="rad" id="rad_1" title="Blue" /> Blue</label>
    as you can see both input's have the same name - it's the id's that are different thus allowing you to utilise the label properly.


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
  •