Question

I would like to include a feature that lets users of my site sort the results of a search, either by name or by price.

This is fairly simple as all i intend on doing is changing the mysql query, via php.

So basically the query looks like this:

$searchResultQuery = "
    SELECT id, name, price
    FROM items
    WHERE MATCH (name)
    AGAINST ('{$GLOBALS['input']}' IN BOOLEAN MODE)
    ORDER BY $GLOBALS['sort']
";

And the html looks something like this:

<form>
<select name="sort" id="sort" style="float: left;">
    <option value="name">Name</option>
    <option value="price">Price</option>
</select>
</form>

What i want to do, is have the form automatically submit when a new option is selection. As in, by default the results are ordered by name, but if the user chooses price, then it will adjust the results so display in order of their prices. This would happen without the user needing to click on a submit button of some sort.

As i have a very bleak knowledge of javascript, I have been reading up on some of the html5 additions, and it seems that there is nothing to cover this. Is this possible without the use of javascript or am i forced to learn how to use the onchange attribute?

If anyone has any input regarding this, it would be greatly appreciated, thank you!

EDIT:

This would be what i have added to the controller, although i assume this is the reason that is is not being passed:

if (isset($_POST['sort']))
{   
    $GLOBALS['sort'] = $_POST['sort'];
}

How would i add the forms value to the globals variable?

Answer 1

Here is the PHP code (don’t forget to escape user input before sending it to DB engine):

$pattern = mysql_real_escape_string($GLOBALS['input']);
$sort = mysql_real_escape_string(isset($GLOBALS['sort']) ? $GLOBALS['sort'] : 'name');

$searchResultQuery = "
    SELECT id, name, price
    FROM items
    WHERE MATCH (name)
    AGAINST ('$pattern' IN BOOLEAN MODE)
    ORDER BY $sort
";

And to automatically submit the form you have to handle select’s onchange event:

<form name="myform">
<select name="sort" id="sort" style="float: left;" onChange="javascript:document.myform.submit();">
    <option value="name">Name</option>
    <option value="price">Price</option>
</select>
</form>