Display results by building up the search criteria using checkboxes

I have a new project to look at and need some advice as the workings of it.

The idea comes from too sites I have found:

http://www.hotels.com/search.do?asaReport=Landing%3A%3ANoSuggest&sortOrder=&viewType=LIST&resolvedLocation=&pageNumber=0&destination=Barcelona%2C+Spain&arrivalDate=12%2F04%2F2013&departureDate=14%2F04%2F2013&numberOfRooms=1&roomInfoList%5B0%5D.numberOfAdults=2&children%5B0%5D=0&searchParams.landmark=&hotelId=&destinationId=&queryFormState=CLOSED&searchParams.needPossibleResults=true&activeTab=DESTINATION&page=1#vt=LIST&rl=CITY%3A1644687%3AEXACT_RED%3AHIGH&pfm=2&dn=Barcelona,+Spain&cd=12/04/2013&dd=14/04/2013&nr=1&pn=1&upn=0&so=BEST_SELLER&pfcc=GBP&r=2&cpr=0

In the one above you can change the search of the hotels by changing the star rating and all and building up the query

The other one is:

http://www.ctshirts.com/mens-shirts/mens-dress-shirts?q=usddefault|||||||||||||||

again and this is closer where thet select the category type which in htis case is shirt then they build up the query on the left with all the different varieties and all.

Its the way you selct the checkbox it refreshes and the results are changed accordingly.

Thanks

One thing I noticed with the shirt website way of doing it, that the values are already in the url so they set like for example if you rollover necksize 15 its already set as one of the values in the url string.

But how are they doing it so that when there already a selection made it adds another vlaue to it rather than just using that string value.

This is what i’m looking to do where as in my case if say spain has been selected as a category, then they can select a few regions, barcelona, majorca and so on and the search gets bigger and star ratings etc

What’s the question?

BTW, the shirt page is outrageous: a checkbox is not supposed to refresh a page.

BTW2, the refresh is javascript, not php. The page could be preloaded or AJAX.

Hi,

The question which you may have already answered with AJAX is how do they do it basically.

This is what I need to do.

Starting on the home page, the visitor clicks Spain then thy are taken to a page where all the spain hotels are shown, and on the left you have regions, star ratings etc.

The visitor can then change the search by building up that query, by selecting say barcelona and malaga from the regions and each time they select one it automatically changes the results, then they can also change the star rating, haveing multiple values in each section to change the results that are displayed.

But the idea being that when one option is selected the page refreshes and the results change, rather than selcting a few checkboxes and then finally selecting a go button at the bottom.

Your question really belongs on the website design board, it’s not a programing issue.

My own feeling is that you should not insult the visitor’s intelligence: most people are quite capable of checking three boxes:

Size 12, blue, short sleeve

or

Barcelona, 2 beds, 4 stars

and then pressing a submit button. Refreshing on each choice breaks the visitor’s concentration on his problem by making him wonder what is going to happen next, he might even forget about sleeve length or the number of beds during the refresh. LOL

Don’t bug the visitor with unnecessary “features.” KISS: keep it simple Sam!

I agree with captainccs and many hotel sites that I have used, give you buttons to click to apply your filter/search. I wouldn’t particularly use ajax in this scenario, for a few reasons. One you can introduce a race condition. If I were to quickly check 3 checkboxes, you just sent 3 ajax requests and I’ll be shown the one that returns last (not necessarily the one that exhibits my choices). Granted, you can fix that with appropriate programming, but I’d stay away from it. Two, it requires JavaScript and thus anyone who needs accessibility may have troubles using the site. Lastly, it adds complexity without adding anything to the end user.

I’d go with a form, use a button (make it an image button if you want it to stand out), and let the user be in control.

Ok thanks guys, will go back and say about these issues and get them to be happy with the checkbox and go button to search.

Thanks again

MMM, as expected they where a bit sort of well just work it out with me, and did explain the issues above, and they didnt seem that bothered that if you click 3 quickly it wouldnt work properly aswel.

So I’m in a bit of a rock and hard place, as I understand the issues, but may need to give it a go.

That’s always the business choice. Unfortunately, until the end users respond negatively, you will likely have to just suck it up and go with their idea. Been there, done that.

Don’t sell features, sell benefits. It’s hard to know which design is better without customer testing but many clients are too cheap to pay for it.

If it works, they take the credit, if it doesn’t, they blame you! As you say: “between of a rock and hard place.”

Nightmare really, but just found this tutorial which might be close to what I need.

Hi cpradio by the way, long time no speak, hope your well.

Nightmare, but as you say thats how it goes I suppose.

I just found this tutorial which might be a start, so we see.

http://www.jotorres.com/2011/11/display-database-information-with-ajax-jquery-and-php/

Hi cpradio, long time no speak, hope your well

[ot]Yes, it has been a long while since I’ve been in the PHP forum (or posting period, have done a lot of moderating though). Work has been keeping me busy as we move to a new deployment structure while trying to develop new features into the projects that are going to use this new deployment structure.

Hopefully in the next couple of weeks, things will settle down.[/ot]

Ah that tutorial is on button click, but do you think that if follow the tutorial and get it working that then moving away from the button click to the show each time you select a checkbox will be difficult.

I hope you dont leave the forums all together, I know there plenty on here who can help, you just seem to have a way that I understand.

Yep, that process will work. It will be easier for you to debug things too. At least you can “get it working” before introducing race conditions.

Off Topic:

Nah, that won’t happen :slight_smile: I’ll find ways to get back here once things start to settle down (like today)

OK I have made a start on this from the bottom up.

Basically I need to create a load of checkboxes to allow the user to improve the results they see from the original output.

What I mean by this, is that they forst select the country then they go to a results page, where on the left they will have a choice of dynamically generated regions for that country, star ratings which could be set really, and possibly ammenities which will also be dynamically generated.

Then on select of any checkbox the page refershes and the results change according to that selection, and so on as much as they wont.

So ive started with below, and would like an opinion. Again I’m not a high end programmer, but learning quickly, so I have got my limits and prefer to build up rather than jump in head first.



<?
session_start();
include("config.php");
?>
<?
$url = $_SERVER['REQUEST_URI'];
print "<pre>";

print $url;

$url_parsed = parse_url($url);
print_r($url_parsed);

parse_str($url_parsed['query'], $url_parts);
print_r($url_parts);

print "</pre>";
?>
<head>
<script language="JavaScript">
function checkRefresh(value)
{
	document.form1.submit();
}
</script>

</head>

<body>
<div id="wrapper">

<form name="form1">
<input type="checkbox" name="checkOne" value="1" onClick="javascript:checkRefresh()" checked="checked"> 1
<!--<input type="checkbox" name="checkOne" value="1" onClick="javascript:checkRefresh()" <? if ($checkOne > "") { ?> checked="checked" <? } else { ?>  <?} ?>> 1 -->
<input type="checkbox" name="checkTwo" value="2" onClick="javascript:checkRefresh()"> 2
<input type="checkbox" name="checkThree" value="3" onClick="javascript:checkRefresh()"> 3
<input type="checkbox" name="checkFour" value="4" onClick="javascript:checkRefresh()"> 4
</form>

<div id='result_table'></div>

</div>
</body>
</html>

What im trying to do above is create the url strings, which seems to be working fine, as you can see in the link below.

http://devchecksafetyfirst.csf.dcmanaged.com/

If this is fine, the next thing im trying to do is at first have the checkboxes unchecked, but if after reading the url its value is > “” then the checkbox is kept checked, as the user then continues to selct other checkboxes to refine their results.

Sorry for this edit, but on thinking of it should change the checkbox names to below isnt it.


<input type="checkbox" name="check[]" value="1" onClick="javascript:checkRefresh()" checked="checked" />1
<input type="checkbox" name="check[]" value="2" onClick="javascript:checkRefresh()"> 2
<input type="checkbox" name="check[]" value="3" onClick="javascript:checkRefresh()"> 3
<input type="checkbox" name="check[]" value="4" onClick="javascript:checkRefresh()"> 4

But still got the problem of checking if one of them has a value to either keep it checked or not.

But with adding the checkboxes in an array, that way of doing it is new to me, so would need to understand how to get those values back out.

i have looked into it, and the code below seems to be the correct way, but unsure how I will be able to see if the url string contains a value so that the checkbox it relates to is checked or unchecked.


if (is_array($_GET['check'])) {
     foreach($_GET['check'] as $check) {
        ...
     }
}

I usually do something like so:

$isOneChecked = in_array('1', $_REQUEST['check']);
$isTwoChecked = in_array('2', $_REQUEST['check']);
$isThreeChecked = in_array('3', $_REQUEST['check']);
$isFourChecked = in_array('4', $_REQUEST['check']);

Use it inline like so (untested, may have a syntax error):

<input type="checkbox" name="check[]" value="1" onClick="javascript:checkRefresh()" <?php echo (in_array('1', $_REQUEST['check'])) ? "checked=\\"checked\\"" : ""; ?> /> 1
<input type="checkbox" name="check[]" value="2" onClick="javascript:checkRefresh()" <?php echo (in_array('2', $_REQUEST['check'])) ? "checked=\\"checked\\"" : ""; ?> /> 2

Hi cpradio,

i was just about to post what I had below:


<?
if (is_array($_GET['check'])) {
     foreach($_GET['check'] as $check) {
       echo $check;
     }
}
?>

<form name="form1">
<input type="checkbox" name="check[]" value="1" onClick="javascript:checkRefresh()">1
<input type="checkbox" name="check[]" value="2" onClick="javascript:checkRefresh()" <? if ($check = "2") { ?> checked="checked" <? } else { ?>  <? } ?>> 2
<input type="checkbox" name="check[]" value="3" onClick="javascript:checkRefresh()"> 3
<input type="checkbox" name="check[]" value="4" onClick="javascript:checkRefresh()"> 4
<input type="checkbox" name="check[]" value="5" onClick="javascript:checkRefresh()"> 5
</form>

Which seems to work, but as you can see from the link, what you think?
On looking at yours, would that work if those checkboxes where created dynamically, because after they select the country of choice, the regions with checkboxes will be different for each country and so generated from the database according to the country ID.

ah no it doesnt, lol…

Mine doesnt work, i thought it did, but when i deselected 2 it stayed on.