Want to customize my form like this (example included)

Discussion in 'PHP' started by ian_batten, Jan 30, 2009.

  1. #1
    Hi guys,

    Looking for some help here. I've currently got a form with several different options to select with radio buttons, and they will then be sent via a submit button.

    But instead of radio buttons, I would like to do something like on here:

    http://consoles.freebiejeebies.co.uk/

    Where each items is a clickable cell which will change the form selection, rather than just a radio button.

    Any ideas how to do this?

    + rep for any help :)
     
    ian_batten, Jan 30, 2009 IP
  2. crivion

    crivion Notable Member

    Messages:
    1,669
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    210
    Digital Goods:
    3
    #2
    iT CAN BE done via ajax, or jquery, or simple js
    I recommend jquery they have nice examples on their site easy to use
     
    crivion, Jan 30, 2009 IP
  3. ian_batten

    ian_batten Well-Known Member

    Messages:
    1,991
    Likes Received:
    106
    Best Answers:
    0
    Trophy Points:
    185
    #3
    Crivion - many thanks for your input. I'm an absolute disaster when it comes to jscript. I did take a look at jquery and also facebox - and thought it could be done with that, but didn't have a clue how.

    You got any pointers as to where I could start on this? I guess I'd be looking to integrate the form in the jquery/facebox?
     
    ian_batten, Jan 30, 2009 IP
  4. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #4
    yeah. this belongs in javascript. http://consoles.freebiejeebies.co.uk/ uses jquery - there are plenty of ways of coding this

    the semantic way would be elements in a shape like...
    
    <form action="blah">
    <input type="hidden" id="mySelect" name="mySelect" value="" />
    // define the css... for the class bellow as width, height, border, padding, float left, cursor pointer etc. 
    // populate this from a DB as a loop or whatever
    <div class="myFormSelect" style="background-image: url(someimage.gif);" data-option="1"></div>
    <div class="myFormSelect" style="background-image: url(someimage2.gif);" data-option="2"></div>
    ...
    <div class="myFormSelect" style="background-image: url(someimage10.gif);" data-option="10"></div>
    
    // in js for jquery (may need some tweaking, i dont code for jquery but i cant be arsed to look it up, it ought to work):
    $(".myFormSelect").click(function() {
        $("#mySelect").value = this.attr("data-option"); // will assign the value of the image picked
    });
    
    PHP:
    thats the general idea. plugins in jquery that can do similar things: http://www.no-margin-for-errors.com/projects/prettyCheckboxes/ (just found it in google).
     
    dimitar christoff, Jan 30, 2009 IP
  5. ian_batten

    ian_batten Well-Known Member

    Messages:
    1,991
    Likes Received:
    106
    Best Answers:
    0
    Trophy Points:
    185
    #5
    Dimitar, many thanks. I'll try and make sense of that prettycheckboxes plugin, it looks just like the kind of thing I need.

    Will get back to you on whether or not I understand it - that's a totally different story :p
     
    ian_batten, Jan 30, 2009 IP
  6. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #6
    its a case of masquerading an image as a checkbox - the style and size is up to you :)
     
    dimitar christoff, Jan 30, 2009 IP
  7. ian_batten

    ian_batten Well-Known Member

    Messages:
    1,991
    Likes Received:
    106
    Best Answers:
    0
    Trophy Points:
    185
    #7
    Man, I'm lost. This javascript business is far beyond my intellect.
     
    ian_batten, Jan 30, 2009 IP