SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question use image to set hidden value in form

    I asked this question on the php forum but the answers I was getting were to do with javascript so i thought i would get more help here with it. What I'm looking to do is have a selection of coloured boxes in a form. The user will use these to choose which colour they want instead of using a dropdown list of colours.

    I was told if i used the images as inputs in the form this would work but I'm confused. How can I have the user click on one of these images and have that set the value of a hidden field. I ca' have the user select the image and it automatically submit the form as I ave several other selections I need the user to make before the form is submitted.

    Sorry if I'm being a bit thick with this but I'm a bit bamboozeled!

    Any help much appreciated.

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can see 3 solutions to this problem:

    1) Use regular IMG tags and bind an onclick event to them which sets the hidden field.
    2) Use spans or divs with a background color and bind an onclick event to them setting the hidden field
    3) Use an option-group where you wrap each optionbox in it's own span or div with a background color.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the quick reply on this. I'm not that great at javascript coding. Could you tell me which would be the better option to go with and a shirt example if you've got the time please?

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess it depends on taste I guess. But the easiest solution would be option 3, for the simple reason that it does not require any javascript.

    <form>
    <div id="redcolor"><input type="radio" name="color" value="red" /></div>
    <br />
    <div id="greencolor"><input type="radio" name="color" value="green" /></div>
    <br />
    <div id="bluecolor"><input type="radio" name="color" value="blue" /></div>
    </form>

    Next you create some CSS for each div like:

    #redcolor {
    width : 100px;
    height : 100px;
    background-color: red;
    }

  5. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks got it sorted out now.


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
  •