Displaying one category of data with drop down list

Question

I have a database that has a table called products, and into the table I have the title, the artist and some other rows that have infos for each product. I have learned to display the data from the database, and I also found a way to display data only from one category . That sounds easy. But I want to combine all this with a drop down menu where the user can select the category he wants to see from a list. How can I make this? I think that I have to use javascript but some examples that I found doesn t refer to javascript at all.

Here is the code that i display all the data from my database:

<?php
$con = mysql_connect("localhost","root","password");
mysql_query('SET NAMES UTF8');
if (!$con)
{
    echo "problem with connection" .mysql_error();
}
?>
<?php
mysql_select_db("myapp",$link);
$result = mysql_query('SELECT * FROM products',$link);
while($row = mysql_fetch_array($result))
{
    $myimage = '<img src="'.$row['image'].'" />';

    echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
 />" . "<p style='color:red;' >" . "myprice " . $row['price'] . "€" . "</p>". 
 '<a href="image.php?id='.$row['id'].'">'
    . "details" . "<a>" . "</div>" ;                                       
}
mysql_close($link);

  ?>

And here is the code that I display data only from one category:

<?php
mysql_select_db("myapp",$link);
$result = mysql_query('SELECT * FROM products WHERE category="cd"',$link);
while($row = mysql_fetch_array($result))
{
    $mycategory = $row['category'];
    $myimage = '<img src="'.$row['image'].'" />';
    echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
/>" . 
    "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a  
href="image.php?id='.$row['id'].'">'
    . "details" . "<a>" . "</div>" ;  
}
mysql_close($link);

?>

and here is my very simple html drop down menu

<select name="singlelist" id="singlelist" size="1" >
<option value="mycd" >CD</option>
<option value="mydvd" >DVD</option>
<option value="other" >other</option>
</select>

I haven t mentioned that I want to have 2 drop down lists, where the user will select subcategory, but I do believe that if I understand how all this works, I will be able to make it work. Has anyone else came throught this before?

ps: I use the mysql_* functions because it s for a project in school

Answer 1

Just like Jared said you could seperate the php page and load the data on to a div. You can trigger the php page to load on a div with a javascript function and also trigger this function with an onselect() or onchange().

I hope this example code helps.

HTML:

<script type="text/javascript">
    function getList(cat, url, containerid){
        var xhr=false;
        if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            }
            else {
                if (window.ActiveXObject) {
                    try {
                        page_request = new ActiveXObject("Msxml2.XMLHTTP")
                    } 
                    catch (e){
                        try {
                            page_request = new ActiveXObject("Microsoft.XMLHTTP")
                        }
                        catch (e){
                        }
                    }
                }
            }

            if (xhr) {
                var params = "?list="+cat 
                xhr.onreadystatechange = showContents;
                xhr.open("GET", url+params, true);
                xhr.send(null);
            }
            else {
                alert("Sorry, but I couldn't create an XMLHttpRequest");
            }

        function showContents(){
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var outMsg = xhr.responseText;
                }
                else {
                    var outMsg = "There was a problem with the request " + xhr.status;
                }

                document.getElementById(containerid).innerHTML=xhr.responseText;
            }

        }
    }

</script>

    <select name="singlelist" id="singlelist" size="1" onchange="getList(this.options[this.selectedIndex].value, 'php_file.php', 'container')" >
    <option value="cd" >CD</option>
    <option value="dvd" >DVD</option>
    <option value="other" >other</option>
    </select>
    <div id="container"> </div>

You should pass 3 params on the getList function: first the category then the php file and lastly the div id.

like this example

onchange="getList('category', 'php_file', 'div_id')"

PHP:

<?php
  if(isset($_GET['list'])){
    mysql_select_db("myapp",$link);
    $result = mysql_query('SELECT * FROM products WHERE category="'.$_GET['list'].'"',$link);
    while($row = mysql_fetch_array($result))
    {
        $mycategory = $row['category'];
        $myimage = '<img src="'.$row['image'].'" />';
        echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
    />" . 
        "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a  
    href="image.php?id='.$row['id'].'">'
        . "details" . "<a>" . "</div>" ;  
    }
    mysql_close($link);  
  }
?>

I hope this helps. Also you may want to visit this blog http://crisostomozaidem.blogspot.com/ there are some helpfull tips in here about php.

Answer 2

If you're allowed to use jquery this task is very simple.

I would have a separate php page with the display function. Then depending on the category chosen, do an onselect() or OnChange() and have it load the php page into the div.

Here's an example of how to do it:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<select name="singlelist" id="singlelist" size="1" OnChange=$("#container").load("load.php?do=this.options[this.selectedIndex].value")>
<option value="mycd" >CD</option>
<option value="mydvd" >DVD</option>
<option value="other" >other</option>
</select>

<div id=container></div>

PHP:

<?php
mysql_select_db("myapp",$link);
$result = mysql_query('SELECT * FROM products WHERE category="' . $_GET['do'] . '"',$link);
while($row = mysql_fetch_array($result))
{
    $mycategory = $row['category'];
    $myimage = '<img src="'.$row['image'].'" />';
    echo  "<div id='appear'>" . $myimage . '<br />' . $row['title'] .  "<br   
/>" . 
    "<p style='color:red;' >" . "price " . $row['price'] . "€" . "</p>". '<a  
href="image.php?id='.$row['id'].'">'
    . "details" . "<a>" . "</div>" ;  
}
mysql_close($link);

?>

Of course it's important to note that I didn't include any sort of precautions and the code as is is extremely vulnerable to SQL Injections. You should be sure you sanitize any input before it's put in a query.

I'm also a little rusty on my jquery, so if I've missed something hopefully someone else can edit my answer.