SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict csj's Avatar
    Join Date
    Mar 2005
    Location
    South Africa
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [help] Option Box select

    I am not very familiar with JavaScript and I'm not sure if what I need uses JS. But let me ask anyway.

    I have a form with "option boxes" and next to each option box I have an image. When you click on a specific image it will "select" the corresponding option box.
    (It has to be a radio option box. I CANT use a checkbox)

    I hope this problem is clear, Is there a way of doing this? I would be so grateful for any help or tips!
    Last edited by csj; May 3, 2007 at 00:24.

  2. #2
    SitePoint Zealot the DtTvB's Avatar
    Join Date
    Jul 2006
    Location
    Thailand
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, JavaScript is not needed. Use label!

    <input type="radio" id="radio1" ...... /> <label for="radio1"><img ........ /></label>

  3. #3
    SitePoint Addict csj's Avatar
    Join Date
    Mar 2005
    Location
    South Africa
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply!

    I'm not sure how the label thing works? How do I now click on the image so it selects the radio button?

  4. #4
    SitePoint Addict csj's Avatar
    Join Date
    Mar 2005
    Location
    South Africa
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this function available for images? Doesn't it only work for text?

  5. #5
    SitePoint Zealot the DtTvB's Avatar
    Join Date
    Jul 2006
    Location
    Thailand
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!-- So here is the radio box... I specify its ID. -->
    <input type="radio" id="radioone" />
    
    <!-- And this label is for the input with id "radioone". -->
    <label for="radioone"><img src="-ARTICLES-IMAGES-/windows3.jpg" alt="..." /></label>
    
    <!-- So clicking on it means clicking the radio. />

  6. #6
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    
    window.onload = function (){
    var el, i = 0;
    while(el = document.getElementsByName('imgname')[i++]){
    el.onclick = function() {this.previousSibling.checked= true;}
    }
    }
    </script>
    <input type="radio" name="radioname" id="rad0" ><img name="imgname" src="http://www.sitepoint.com/forums/image.php?u=29384&dateline=1077457902"><br>
    <input type="radio" name="radioname" id="rad1" ><img name="imgname" src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180"><br>
    <input type="radio" name="radioname" id="rad2" ><img name="imgname" src="http://www.sitepoint.com/forums/image.php?u=136457&dateline=1177766790"><br>
    Last edited by muazzez; May 7, 2007 at 07:20.

  7. #7
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csj View Post
    Is this function available for images? Doesn't it only work for text?
    Did you try it?
    Ian Anderson
    www.siteguru.co.uk

  8. #8
    SitePoint Addict csj's Avatar
    Join Date
    Mar 2005
    Location
    South Africa
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies!! I sorted this problem out by just using a simple onclick function on the pic.


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
  •