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.
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Multiple selectable items like checkboxes.
- Thread starter Cabbit
- Start date
- Sort by reaction score
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.
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>
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:
Then you'd handle the images you want in your CSS:
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.
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.
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.
trying mrogers solution first i come up with this in the code so far
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.
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.
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
-jim
i simplified it a we bit
but no mater what the output is 1
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
but no mater what the output is 1
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>You didn't need to remove the code. It showed an interesting trick with PHP that I've never seen.
I am able to click on the image and even with the text the outputted value is always 1.
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
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.
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>Followed your code but the output from the php is null .
link to demo
.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 />";
}
?>Followed your code but the output from the php is null
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>