Multiple selectable items like checkboxes.

Discussion in 'Web Design and Development' started by Cabbit, Sep 26, 2008.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    I am looking for a way to make something like a styled checkbox that is just a grayed out image then on click will be the colored image to show it is selected then on submit of the forum using it will upload values to the database which is already set up just trying to make something like a checkbox that is styled for multiple inputs.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Just a thought to try out:
    Do a normal <input type="checkbox"> thing then place the img inside the label for that form element. You'll then use CSS to place the img on top of the checkbox. Clicking on the label for a form element will trigger the checkbox to become checked/unchecked even though you can't see it. You'd then use JavaScript to do a img swap of the img inside the label. How does that sound? It would let you work with the form in a very normal manner since the form wouldn't be any different than any other form.

    If this sounds good and you need help just let me know.

    HTML:
    <input type="checkbox" name="box1" />
    <label for="box1"><img id="boximg1" src="image-1.jpg" alt="text description" /></label>
     
  3. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #3
    Forget including a checkbox at all. Just use a style swap for your "checked/unchecked" state to show the user, and simultaneously change the value of a hidden form field when they click. I use jQuery all the time as my JS library (highly recommended, makes stuff like this so easy), so with that included on your page it would look something like this:

    HTML:
    <a class="checkbox selected" id="myfield1"></a>
    <input type="hidden" name="myfield1" value="1" />
    
    <a class="checkbox" id="myfield2"></a>
    <input type="hidden" name="myfield2" value="0" />
    
    <script type="text/javascript">
    $(".checkbox").click(function() {
      $(this).toggleClass("selected");
      valfield = $("input[name="+this.id+"]");
      if(valfield == "0")
        valfield.value = 1;
      else
        valfield.value = 0;
    });
    </script>
    
    Then you'd handle the images you want in your CSS:

    HTML:
    <style type="text/css">
    a.checkbox {
      display: block; height: 20px; width: 20px;
      background: url("../images/checkbox.gif") left top no-repeat;
    }
    
    a.checkbox.selected {
      background: url("../images/checkbox_selected.gif") left top no-repeat;
    }
    </style>
    
    Basic example there, but hopefully you get the idea. That script attaches a click action to each of the a.checkbox objects so that, when clicked, it toggles the "selected" class on and off as well as changing the value of the hidden form field.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Just want to point out some pros and cons of mrogers and my solutions. If the user has JavaScript disabled, mrogers solution won't work at all since the user can't change the value of a hidden form field. My solution will work with JavaScript disabled, but the user won't know what state the checkbox is in since the image won't change when they click on it (though you could use JavaScript to hide the checkbox only when JavaScript is enabled, which will overcome this issue). mrogers solution is probably a little easier to implement than mine if you're already using JQuery. Both solutions have their good and bad points though.
     
  5. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #5
    trying mrogers solution first i come up with this in the code so far

    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title></title><!-- Page title -->
            <style type="text/css" media="all">@import "stylesheet.css";</style><!-- Stylesheet in site root directory -->
            <script src="jquery.js" language="javascript" type="text/javascript"></script>
        </head>
        <body>
            <div id="main">
            <form action="index.php?subpage=post" method="post">
                <a class="checkbox_paci" id="pacifier"></a>
                <input type="hidden" name="items" value="1" />
                <script type="text/javascript">
                $(".checkbox_paci").click(function() {
                  $(this).toggleClass("selected");
                  valfield = $("input[name="+this.id+"]");
                  if(valfield == "0")
                    valfield.value = 1;
                  else
                       valfield.value = 0;
                });
                </script>
                <a class="checkbox_nappy" id="nappy"></a>
                <input type="hidden" name="items" value="1" />
                <script type="text/javascript">
                $(".checkbox_nappy").click(function() {
                  $(this).toggleClass("selected");
                  valfield = $("input[name="+this.id+"]");
                  if(valfield == "0")
                    valfield.value = 1;
                  else
                       valfield.value = 0;
                });
                </script>    
                <input type="submit">    
            </form>
            </div>
            <?php
            
    if ($_GET['subpage'] == "post"
            {
                for (
    $i=0$i<count($_POST['items']); $i++)
                {
                    
    $val addslashes($_POST['items'][$i]);
                    echo 
    $val
                }
            }
            
    ?>
        </body>
    </html>
    my problem is not the image swap it is how to get the values echoed though php. i.e if the selected value was dummy then echo $val would be dummy. Obviously i would be looking for putting this into a database later but for this test just now echoing the values will do.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    The name attribute should be unique (unless it's for a radio button). Then you won't need that for loop in your PHP, you'll just echo it out.
     
  7. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #7
    JQuery is a cool library but I find the JS embedded in the HTML body section to be confusing to follow, i.e. the code needs to be cleaned up a bit and maybe a function implemented if possible to reduce nearly redundant code and added into the head section. But, alas, it works.


    -jim
     
  8. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #8
    i simplified it a we bit
    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
            <title></title><!-- Page title -->
            <style type="text/css" media="all">@import "stylesheet.css";</style><!-- Stylesheet in site root directory -->
            <script src="jquery.js" language="javascript" type="text/javascript"></script>
        </head>
        <body>
            <div id="main">
            <form action="index.php?subpage=post" method="post">
                <a class="checkbox_paci" id="myfield1"></a>
                <input type="hidden" name="myfield1" value="1" />

                <script type="text/javascript">
                $(".checkbox_paci").click(function() {
                  $(this).toggleClass("selected");
                  valfield = $("input[name="+this.id+"]");
                if(valfield == "0")
                       valfield.value = 1;
                  else
                    valfield.value = 0;
                });
                </script>    
                <input type="submit">    
            </form>
            </div>
            <?php
            
    if ($_GET['subpage'] == "post"
            {
                echo 
    $_POST['myfield1'];
                echo 
    "<br />";
            }
            
    ?>
        </body>
    </html>
    but no mater what the output is 1 :(
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    Well you have to click on the link for it to change value and you have nothing inside the link so there's nothing to click on.

    HTML:
    <a class="checkbox_paci" id="myfield1">Click me</a>
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    You didn't need to remove the code. It showed an interesting trick with PHP that I've never seen.
     
  11. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #11
    I am able to click on the image and even with the text the outputted value is always 1.
     
  12. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #12
    What I posted about if anyone is interested is that you actually can use "items[]" with brackets even in the hidden field "name" attribute just like you'd normally use for the checkbox input type (not a trick).

    Example:
    <input type="hidden" name="items[]" value="1">
    <input type="hidden" name="items[]" value="2">

    But of course simply changing the name works too, heh. That's why I removed the comment. Nevertheless, the above works, returning the results of "items" as an array in the POST global variable after the submit.

    Example: $_POST['items'] is an array or direct reference individual elements as $_POST['items'][0]...and so on.

    That's all folks.

    -jim
     
  13. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #13
    Do you have anything like Firebug that could tell us if there are any javascript errors? Is the image (class) toggling working?

    Also, you don't need the text inside the "a" tag as long as you've turned it into a block and given it dimensions. That's what the CSS I supplied was for.
     
  14. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #14
    The image is toggling ok but the result never changes. I dont have firebug but i have put the code up here so you can see what is happening.
     
  15. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #15
    I think see the problem:

    PHP:
    if(valfield == "0")
    should be

    PHP:
    if(valfield.value == "0")
     
  16. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #16
    That did not work ether unfortunately. I have however made a zip of the directory so if you wish to continue helping the source files should help i hope.

    Source
     
  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #17
    This seems to work. Not sure why the JQuery part wasn't working. The line that had valfield = $("input[name="+this.id+"]"); wasn't really capturing what it was suppose to so I swapped it out with a different function. I also switched the name/id pair in the link and input tags to make it a touch easier. This is tested.

    HTML:
    		<form action="index.php?subpage=post" method="post">
    			<a class="checkbox_paci" name="myfield1"></a>
    			<input id="myfield1" value="1" type="hidden">
    
    			<script type="text/javascript">
    			$(".checkbox_paci").click(function() {
      			$(this).toggleClass("selected");
      			valfield = document.getElementById(this.name);
    			valfield.value = (valfield.value == 0) ? 1 : 0;
    			});
    			</script>	
    			<input type="submit">	
    		</form>
    
     
  18. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #18
    Followed your code but the output from the php is null :(.
    link to demo

    PHP:
    <form action="index.php?subpage=post" method="post">
                <a class="checkbox_paci" name="myfield1"></a>
                <input id="myfield1" value="1" type="hidden">

                <script type="text/javascript">
                $(".checkbox_paci").click(function() {
                  $(this).toggleClass("selected");
                  valfield = document.getElementById(this.name);
                valfield.value = (valfield.value == 0) ? 1 : 0;
                });
                </script>    
                <input type="submit">    
            </form>
            </div>
            <?php
            
    if ($_GET['subpage'] == "post"
            {
                echo 
    $_POST['myfield1'];
                echo 
    "<br />";
            }
            
    ?>
     
  19. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #19
    I forgot about the PHP side. I only tested the JavaScript. The following should work. The PHP ended up looking at the link rather than the input because of the name attribute switch. So the link now uses the rel attribute instead of the name attribute, and the input tag has the id and name attribute set to the same thing, which PHP should interpret correctly.

    HTML:
    		<form action="index.php?subpage=post" method="post">
    			<a class="checkbox_paci" rel="myfield1"></a>
    			<input id="myfield1" name="myfield1" value="1" type="hidden">
    
    			<script type="text/javascript">
    			$(".checkbox_paci").click(function() {
      			$(this).toggleClass("selected");
      			valfield = document.getElementById(this.rel);
    			valfield.value = (valfield.value == 0) ? 1 : 0;
    			});
    			</script>	
    			<input type="submit">	
    		</form>
     
  20. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #20
    thanks that works brill now. Thanks a lot for your help guys, i will make a non java version for users without Jscript using basic checkboxes as once this is implemented.
     

Share This Page