It actually appears that the Javascript is not totally reliable. Perhaps it’s not fast enough. The values passed in the URL do not necessarily reflect the selections, once you’ve played around for a while.
On which page can we experiment with that problem, and propose a suitable solution?
Oh dear.
I tried playing around with this for a while, too, but I couldn’t make it misbehave
How did you manage exactly?
That won’t be the problem - it’ll doubtless be my faulty coding 
I asked for assistance on the same issue over at DigitalPoint. Some very rude and elitist people over there. https://forums.digitalpoint.com/threads/add-div-ids-to-input-onclick.2740626/
Wow, yeah.
They are right in so far as you could make the divs into inputs of some sort and submit them with the form. Then no JavaScript would be needed, as it would be a normal form.
If you don’t want to do that, then JS is the way to go.
Nice to see deathshadow hasn’t changed 
You could simply use checkbox and labels and if you associate them with the for attribute you can style the label depending on whether the checkbox is checked or not and achieve the same styling and behavior as the current design (e.g. :checked + label {border-color:blue}). The actual check box can be off screen and not visible if required.
1 Like
Hi Paul,
It’s a shame, as he had a good point, but brought it across in a rather confrontational way.
Edit: I thought the first guy to reply was Deathshadow. Now I see that Deathshadow, is, well … Deathshadow.
Ahh, this was what was missing for me. I hadn’t thought of doing that.
Would it be too much trouble to ask for an example of how the OP might alter his markup, so that it keeps the same appearance, but uses an checkbox input instead?
No trouble ).
I’d roughly do it like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.pageWidth {
padding:0 5px;
padding-left: 5px;
margin: 0px auto;
max-width: 1190px;
}
.sectionMain {
background-color: #FCFCFF;
padding: 10px;
margin: 10px auto;
border: 1px solid #DADADA;
}
.wearablesList input[type=checkbox] {
position:absolute;
left:-999em;
top:-999em;
}
ul.wearablesList {
margin:0;
padding:0;
list-style:none;
text-align:justify;
}
.wearablesList li {
display: inline-block;
margin: 0 0 10px 0;
word-spacing:0;
width:16%;
vertical-align: top;
}
@media screen and (max-width:1000px) {
.wearablesList li {
width:19%;
}
}
@media screen and (max-width:850px) {
.wearablesList li {
width:24%;
}
}
@media screen and (max-width:600px) {
.wearablesList li {
width:32%;
}
}
.wearablesList label {
display:block;
text-align:center;
background-color: #fff;
border: 2px solid rgb(218, 218, 218);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position:relative;
padding:10px;
}
.wearablesList label:after {
content: "\f00c";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: red;
font-size: 24px;
position: absolute;
top: 0;
right:0;
display:none;
}
.wearablesList li strong, .wearablesList li span {
display:block
}
.wearablesList li img {
max-width:100%;
height:auto;
}
.wearablesList:after {
content:"";
display:inline-block;
height:1px;
width:100%;
}
.wearablesList input[type=checkbox]:checked + label {
border-color:blue;
}
.wearablesList input[type=checkbox]:checked + label:after {
display:block;
}
</style>
</head>
<body>
<div class="pageWidth">
<div class="sectionMain">
<form>
<ul class="wearablesList" id="smartwatches">
<li>
<input type="checkbox" name="watch" id="watch">
<label for="watch"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch1"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch2">
<label for="watch2"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch2"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch3">
<label for="watch3"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch3"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch4">
<label for="watch4"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch4"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch5">
<label for="watch5"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch5"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch6">
<label for="watch6"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch6"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch7">
<label for="watch7"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch7"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch8">
<label for="watch8"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch8"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch9">
<label for="watch9"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch9"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch10">
<label for="watch10"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch10"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch11">
<label for="watch11"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch11"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
<li>
<input type="checkbox" name="watch" id="watch12">
<label for="watch12"> <img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="watch11"> <strong>Apple Watch</strong> <span class="price">$349+</span> </label>
</li>
</ul>
</form>
</div>
</div>
</body>
</html>
I didn’t add the submit button but that would be straight forward.
1 Like
Thank you everyone for your assistance so far. I will try this out as soon as I have a little time. Is the consensus that the checkbox strategy is best?
Thanks, Paul.
I’ve really got to spend some time brushing up on CSS.
Yup.
You’ll need to add something like name="wearables[]" to the inputs and give them a value.
Then you’ll get this in your PHP:
Array
(
[wearables] => Array
(
[0] => watch
[1] => watch-1
[2] => watch-2
[3] => watch-9
[4] => watch-11
)
)
You could also do: name="wearables[watch]" value="1" etc, which would give you:
Array
(
[wearables] => Array
(
[watch] => 1
[watch-1] => 1
[watch-2] => 1
[watch-9] => 1
[watch-11] => 1
)
)
Or leave out the value: name="wearables[watch]" etc, which would give you:
Array
(
[wearables] => Array
(
[watch] => on
[watch-1] => on
[watch-2] => on
[watch-9] => on
[watch-11] => on
)
)
Here’s the HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Form Demo</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.pageWidth {
padding:0 5px;
padding-left: 5px;
margin: 0px auto;
max-width: 1190px;
}
.sectionMain {
background-color: #FCFCFF;
padding: 10px;
margin: 10px auto;
border: 1px solid #DADADA;
}
.wearablesList input[type=checkbox] {
position:absolute;
left:-999em;
top:-999em;
}
ul.wearablesList {
margin:0;
padding:0;
list-style:none;
text-align:justify;
}
.wearablesList li {
display: inline-block;
margin: 0 0 10px 0;
word-spacing:0;
width:16%;
vertical-align: top;
}
@media screen and (max-width:1000px) {
.wearablesList li {
width:19%;
}
}
@media screen and (max-width:850px) {
.wearablesList li {
width:24%;
}
}
@media screen and (max-width:600px) {
.wearablesList li {
width:32%;
}
}
.wearablesList label {
display:block;
text-align:center;
background-color: #fff;
border: 2px solid rgb(218, 218, 218);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position:relative;
padding:10px;
}
.wearablesList label:after {
content: "\f00c";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: red;
font-size: 24px;
position: absolute;
top: 0;
right:0;
display:none;
}
.wearablesList li strong, .wearablesList li span {
display:block
}
.wearablesList li img {
max-width:100%;
height:auto;
}
.wearablesList:after {
content:"";
display:inline-block;
height:1px;
width:100%;
}
.wearablesList input[type=checkbox]:checked + label {
border-color:blue;
}
.wearablesList input[type=checkbox]:checked + label:after {
display:block;
}
</style>
</head>
<body>
<div class="pageWidth">
<div class="sectionMain">
<form action="compare.php">
<ul class="wearablesList" value="XXX" id="smartwatches">
<li>
<input type="checkbox" name="wearables[]" value="watch" id="watch">
<label for="watch">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-1" id="watch-1">
<label for="watch-1">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-2" id="watch-2">
<label for="watch-2">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-3" id="watch-3">
<label for="watch-3">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-4" id="watch-4">
<label for="watch-4">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-5" id="watch-5">
<label for="watch-5">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-6" id="watch-6">
<label for="watch-6">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-7" id="watch-7">
<label for="watch-7">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-8" id="watch-8">
<label for="watch-8">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-9" id="watch-9">
<label for="watch-9">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-10" id="watch-10">
<label for="watch-10">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
<li>
<input type="checkbox" name="wearables[]" value="watch-11" id="watch-11">
<label for="watch-11">
<img src="http://wearabletechforums.com/images/specs-gearS.jpg" alt="Apple Watch">
<strong>Apple Watch</strong> <span class="price">$349+</span>
</label>
</li>
</ul>
<input type="submit" value="Compare" />
</form>
</div>
</div>
</body>
</html>
Ok I’m gonna play around with this a little bit and see if I can get this to work. FYI, the wearable IDs cannot be numbers. They need to be names, because I will continually be adding new wearables in a random order, and I also want their names in the URLs. Moreover, I expect that the categories (smartwatch, fitness band, activity tracker) will continue to merge over time, and therefore I don’t want the categories to have any particular importance.
How you send the data to the PHP script is pretty much up to you.
Do whatever works best.
Off Topic:
As usual. It is a real shame, though. I guess some people will never change. 
Thank you everyone, for your help. With this, I was able to recreate my page, and all seems to be working here: http://wearabletechforums.com/pages/compare-wearables3/
I’m having a minor styling issue, which I started a topic about here. Unless anyone has any suggestions about my implementation, I believe I am all set!
Thanks again.
EDIT
page has since been revised, please see below
1 Like
Hm, not for me. I just get a bunch of errors on screen.
It’s working for me ok
Clicking the Click Here button I just get a blank page with this showing on it:
Array ( [0] => )
If I click a few of the watches and then click the Click Here button, I get a white page with only this displayed:
Warning: urldecode() expects parameter 1 to be string, array given in /home3/jes269/public_html/compare/specs.php on line 2
Array ( [0] => )
This is in both Chrome and FF, so not a browser issue.
That’s an empty submission, so that would be correct, I guess.
I get that too. Why are you using urldecode()?
@geiger, what does your PHP file contain?